CSS3. Moduł kolorów

24 maja 2012
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek
Niniejsza wersja:
http://www.w3.org/TR/2011/REC-css3-color-20110607
Najnowsza wersja:
http://www.w3.org/TR/css3-color
Poprzednia wersja:
http://www.w3.org/TR/2010/PR-css3-color-20101028
Redaktorzy:
Tantek Çelik (ekspert zaproszony i wcześniej w Microsoft Corporation) <tantek@cs.stanford.edu>
Chris Lilley (W3C) <chris@w3.org>
L. David Baron (Mozilla Corporation) <dbaron@dbaron.org>
Pozostali autorzy:
Steven Pemberton (CWI) <steven.pemberton@cwi.nl>
Brad Pettit (Microsoft Corporation) <bradp@microsoft.com>

Rekomendacja W3C z dnia 07 czerwca 2011 r.

Zapoznaj się z erratą do tego dokumentu, ponieważ może ona zawierać normatywne poprawki.

Zobacz również tłumaczenia.

Streszczenie

CSS (Cascading Style Sheets — kaskadowe arkusze stylów) to język służący do opisu sposobu prezentacji dokumentów HTML i XML na ekranie, papierze, w mowie itd. Zawiera własności i wartości dotyczące kolorów umożliwiające definiowanie kolorów tekstu, tła, obramowań i innych części elementów dokumentów. Niniejsza specyfikacja zawiera opis wartości i własności kolorów pierwszego planu i przezroczystości grup. Wśród nich znajdują się własności i wartości przejęte z CSS 2 oraz nowe własności i wartości.

Status dokumentu

Niniejszy okument jest tłumaczeniem oficjalnej specyfikacji i może zawierać błędy wynikające z tłumaczenia

W niniejszej sekcji opisano status tego dokumentu w chwili jego publikacji. Może on zostać zastąpiony kolejnymi dokumentami. Aktualna lista publikacji W3C oraz najnowsza wersja tego raportu technicznego znajdują się na stronie W3C technical reports index pod adresem http://www.w3.org/TR/.

Preferowanym miejscem do toczenia dyskusji na temat tej specyfikacji jest publiczna lista dyskusyjna (archiwum) www-style@w3.org (zobacz instrukcje). W temacie wiadomości e-mail wysyłanej do tej listy dyskusyjnej należy umieścić tekst „css3-color”, najlepiej w następujący sposób: “[css3-color] …streszczenie komentarza…

Dokument ten jest wynikiem pracy grupy roboczej ds. CSS (część działalności ds. stylów).

W osobnym raporcie implementacyjnym zamieszczono zestaw testów oraz wykazano, że każdy z testów w tym zestawie przeszły przynajmniej dwie niezależne implementacje.

Objaśnienie zmian dokonanych od najnowszego szkicu Ostatniego wezwania zawiera lista uwag dotyczących najnowszego szkicu Ostatniego wezwania. Komentarze zgłoszone w okresie, gdy dokument ten miał status Rekomendacji kandydującej (dot. wersji roboczej z dnia 14 maja 2003) oraz informacje o tym, jak zgłoszone kwestie rozwiązano w tej wersji roboczej można znaleźć w archiwum komentarzy. Komentarze zgłoszone w okresie ostatniej możliwości zgłaszania uwag (Last Call), (dot. wersji roboczej z dnia 14 lutego 2003) oraz informacje o tym, jak zgłoszone kwestie rozwiązano w tej wersji roboczej można znaleźć w archiwum komentarzy.

Dostępna jest też pełna lista zmian dokonanych w tym dokumencie.

Niniejszy dokument został zrecenzowany przez Członków W3C, programistów oraz inne grupy W3C i zainteresowane strony i został zatwierdzony jako Rekomendacja W3C przez Dyrektora W3C. Jest to dokument stabilny i można go używać jako materiału źródłowego oraz cytować w innych dokumentach. Rolą W3C w tworzeniu tej Rekomendacji jest zwracanie uwagi na niniejszą specyfikację odpowiednich organizacji oraz promowanie użycia jej w jak najszerszym zakresie. Dzięki temu zwiększa się funkcjonalność i interoperacyjność sieci internetowej.

Prace nad tym dokumentem zostały przeprowadzone zgodnie z zasadami patentowymi W3C z dnia 5 lutego 2004 r. W3C utrzymuje publiczną listę wszystkich informacji patentowych ujawnionych w związku z rezultatami prac grupy. Na stronie tej znajdują się także informacje na temat ujawniania patentów.Osoba posiadająca wiedzę na temat patentu, który jej zdaniem zawiera uzasadnione roszczenia powinna ujawnić te informacje zgodnie z ustępem 6 zasad patentowych W3C.

Spis treści


1. Wprowadzenie

Od CSS 3 specyfikacja kaskadowych arkuszy stylów jest podzielona na moduły. Prace nad każdym modułem mogą być wykonywane stopniowo, w tempie zgodnym z implementowaniem opisywanych przez ten moduł własności. Niniejsza specyfikacja jest jednym z takich modułów.

Moduł ten zawiera opis własności CSS, za pomocą których można definiować kolory pierwszego planu i stopień przezroczystości elementów. Ponadto dokument ten zawiera szczegółowy opis typu wartości <color> języka CSS.

W specyfikacji tej opisane są własności i wartości dotyczące kolorów ze specyfikacji CSS 1 i CSS 2 oraz nowe własności i wartości.

Grupa robocza nie oczekuje, że wszystkie implementacje CSS 3 będą obsługiwać wszystkie własności lub wartości. Zamiast tego powstanie zapewne niewielka liczba wersji CSS 3 zwanych „profilami”. Na przykład istnieje możliwość, że implementację wszystkich proponowanych własności i wartości będzie zawierać tylko profil dla aplikacji klienckich dysponujących 32-bitową paletą kolorów.

Niniejsza specyfikacja jest wynikiem połączenia wybranych części następujących Rekomendacji i Wersji roboczych oraz dodania pewnych nowych elementów.

2. Zależności

W części Definicje specyfikacji [CSS21] znajdują się dodatkowe definicje terminów. Przykłady kodu źródłowego dokumentów i fragmenty kodu zostały napisane w języku XML [XML10] lub HTML [HTML401].

3. Własności koloru

3.1. Kolor pierwszego planu: własność color

Nazwa:color
Wartość:<color> | inherit
Wartość początkowa:zależna od aplikacji klienckiej
Zastosowanie:wszystkie elementy
Dziedziczenie:tak
Wartości procentowe:nie dotyczy
Media:wizualne
Wartość obliczana:
  • Wartość obliczana dla podstawowych nazw kolorów, szesnastkowych wartości RGB i dodatkowych nazw kolorów jest ich odpowiednikiem w numerycznym formacie RGB, np. sześciocyfrowa wartość szesnastkowa lub wartość funkcyjna rgb(...), z wartością alfa równą 1.
  • Wartość obliczona słowa kluczowego transparent jest składającą się z czterech zer wartością RGBA, np. rgba(0,0,0,0).
  • Sposób określania wartości obliczanej dla słowa kluczowego currentColor znajduje się w opisie tego słowa kluczowego.
  • W przypadku pozostałych wartości, wartość obliczana jest identyczna z wartością zdefiniowaną.

Własność ta służy do określania koloru pierwszego planu treści tekstowej elementu. Ponadto za jej pomocą można określić potencjalną wartość niebezpośrednią (currentColor) dla każdej innej własności, która przyjmuje wartości kolorów. Jeśli słowo kluczowe currentColor zostanie użyte jako wartość samej własności color, ustawienie takie jest traktowane jako color: inherit.

Kolor zielony można określić na różne sposoby:

em { color: lime }               /* nazwa koloru */
em { color: rgb(0,255,0) }       /* Zakres RGB 0-255   */
<color>
Jednostki kolorów są opisane w następnej części.

3.2. Przezroczystość: własność opacity

Określanie przezroczystości można traktować jako rodzaj operacji końcowej. Ogólnie rzecz biorąc najpierw element (włącznie z potomkami) jest renderowany na obrazie pozaekranowym w trybie RGBA, po czym następuje jego zmieszanie z aktualnym obrazem przy użyciu ustawień przezroczystości. Szczegółowe informacje na ten temat znajdują się w części proste mieszanie alfa.

Nazwa:opacity
Wartość:<alphavalue> | inherit
Wartość początkowa:1
Zastosowanie:wszystkie elementy
Dziedziczenie:nie
Wartości procentowe:nie dotyczy
Media:wizualne
Wartość obliczana:Taka sama, jak wartość określona po obcięciu <alphavalue> do przedziału [0.0,1.0].
<alphavalue>
Pod względem składniowym jest to <number>. Jednolity poziom przezroczystości, jaki ma zostać zastosowany do całego obiektu. Wszystkie wartości spoza przedziału od 0.0 (pełna przezroczystość) do 1.0 (całkowity brak przezroczystości) zostaną sprowadzone do tych wartości brzegowych. Jeśli obiekt jest elementem kontenerowym, to efekt jest taki, jakby treść tego kontenera została zmieszana z bieżącym tłem przy użyciu maski, której wartość każdego piksela jest typu <alphavalue>.

Ponieważ element o przezroczystości ustawionej na wartość mniejszą od 1 jest złożony z jednego obrazu pozaekranowego, treść znajdująca się poza nim nie może być ułożona na osi z między fragmentami treści znajdującej się wewnątrz niego. Z tego samego powodu implementacje muszą tworzyć nowy kontekst stosowy dla każdego elementu o przezroczystości ustawionej na wartość niższą od 1. Jeśli element o przezroczystości poniżej 1 nie jest pozycjonowany, implementacje muszą narysować tworzoną przez niego warstwę, w obrębie kontekstu stosowego jego rodzica, w tym samym kontekście stosowym, który byłby użyty gdyby element ten był pozycjonowany i miał zdefiniowane ustawienia z-index: 0 i opacity: 1. Jeśli element z przezroczystością poniżej 1 jest pozycjonowany, to własność z-index ma zastosowanie zgodne ze specyfikacją [CSS21], z tym wyjątkiem, że wartość auto jest traktowana jak 0, ponieważ zawsze tworzony jest nowy kontekst stosowy. Więcej informacji o kontekstach stosowych znajduje się w podrozdziale 9.9 i dodatku E specyfikacji [CSS21]. Zasady opisane w tym akapicie nie dotyczą elementów SVG, ponieważ SVG ma swój własny model renderowania ([SVG11], rozdział 3).

4. Jednostki kolorów

Wartość typu <color> może być słowem kluczowym lub wartością liczbową.

4.1. Podstawowe nazwy kolorów

Lista podstawowych nazw kolorów: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white oraz yellow. W nazwach kolorów nie jest rozróżniana wielkość liter.

Nazwy kolorów i odpowiadające im wartości sRGB
NazwaNumerNazwa koloruSzesn. RGBDziesiętny
  black#0000000,0,0
  silver#C0C0C0192,192,192
  gray#808080128,128,128
  white#FFFFFF255,255,255
  maroon#800000128,0,0
  red#FF0000255,0,0
  purple#800080128,0,128
  fuchsia#FF00FF255,0,255
  green#0080000,128,0
  lime#00FF000,255,0
  olive#808000128,128,0
  yellow#FFFF00255,255,0
  navy#0000800,0,128
  blue#0000FF0,0,255
  teal#0080800,128,128
  aqua#00FFFF0,255,255

Przykład

body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }

4.2. Liczbowe wartości kolorów

4.2.1. Wartości kolorów w formacie RGB

Model kolorów RGB jest stosowany do określania kolorów za pomocą wartości liczbowych. Wszystkie poniższe reguły określają ten sam kolor:

Przykład

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }

W notacji szesnastkowej wartość RGB jest poprzedzona znakiem #. Po nim może znajdować się ciąg trzech lub sześciu cyfr szesnastkowych. Trzycyfrowa notacja RGB (#rgb) jest przekształcana na formę sześciocyfrową (#rrggbb) poprzez skopiowanie poszczególnych cyfr (nie dodanie zer). Na przykład wartość #fb0 zostanie rozwinięta do postaci #ffbb00. Dzięki temu kolor biały (#ffffff) można oznaczyć skrótem (#fff). Dodatkowo w ten sposób można uwolnić się od zależności od głębi kolorów wyświetlacza.

Format wartości RGB w notacji funkcyjnej jest następujący: rgb( + trzy wartości liczbowe (całkowitoliczbowe lub procentowe) oddzielone przecinkami + ). Wartość całkowitoliczbowa 255 odpowiada wartości 100% i wartościom F lub FF w notacji szesnastkowej: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. W bezpośrednim sąsiedztwie wartości liczbowych mogą znajdować się białe znaki.

Wszystkie kolory RGB są określane w przestrzeni kolorów sRGB (zobacz [SRGB]). Różne aplikacje klienckie mogą odtwarzać kolory z różną wiernością. Model sRGB pozwala użyć jednoznacznej i dającej się obiektywnie zmierzyć definicji koloru, którą można odnieść do norm międzynarodowych (zobacz [COLORIMETRY]).

Wartości spoza gamy obsługiwanej przez urządzenie powinny być obcinane lub odwzorowane w tym zakresie, gdy jest on znany: kolory czerwony, zielony i niebieski muszą zostać tak zmienione, aby mieściły się w zakresie obsługiwanym przez urządzenie. Aplikacje klienckie mogą wykonywać odwzorowania kolorów wyższej jakości z jednego zakresu na inny. Niniejsza specyfikacja nie definiuje, jak dokładnie ma być wykonywane to obcinanie. Dla typowego monitora CRT, którego zakres kolorów pokrywa się z przestrzenią sRGB, poniższe cztery reguły są równoważne:

Przykład

em { color: rgb(255,0,0) }       /* Zakres całkowitoliczbowy 0 - 255 */
em { color: rgb(300,0,0) }       /* Obcięcie do rgb(255,0,0) */
em { color: rgb(255,-10,0) }     /* Obcięcie do rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) }  /* Obcięcie do rgb(100%,0%,0%) */

Inne urządzenia, takie jak drukarki, mają inne zakresy niż przestrzeń sRGB. Niektóre kolory spoza zakresu sRGB 0..255 mogą dać się przedstawić (w zakresie danego urządzenia), podczas gdy niektóre kolory z tego zakresu mogą znajdować się poza zakresem urządzenia i mogą wymagać odwzorowania.

4.2.1. Wartości kolorów w formacie RGBA

Model kolorów RGB został w niniejszej specyfikacji rozszerzony o kanał „alfa”, który umożliwia określanie poziomu przezroczystości kolorów. Szczegółowe informacje na ten temat znajdują się w części proste mieszanie alfa. Wszystkie poniższe reguły określają ten sam kolor:

Przykład

em { color: rgb(255,0,0) }       /* Zakres całkowitoliczbowy 0 - 255 */
em { color: rgba(255,0,0,1)     /* to samo, tylko przezroczystość bezpośrednio ustawiona na 1 */
em { color: rgb(100%,0%,0%) }   /* zakres zmiennoprzecinkowy 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* to samo, tylko przezroczystość bezpośrednio ustawiona na 1 */

W odróżnieniu od RGB, dla wartości RGBA nie ma notacji szesnastkowej.

Format wartości RGBA w notacji funkcyjnej jest następujący: rgba( + trzy wartości liczbowe (całkowitoliczbowe lub procentowe) oddzielone przecinkami + <alphavalue> + ). Wartość 255 jest równoważna z 100%, rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8). W bezpośrednim sąsiedztwie wartości liczbowych mogą znajdować się białe znaki.

Implementacje muszą obcinać składniki czerwony, zielony i niebieski wartości kolorów RGBA do gamy obsługiwanej przez urządzenie zgodnie z zasadami dla wartości kolorów RGB złożonych z tych składników.

Poniższe przykłady ilustrują efekt, jaki można uzyskać przy użyciu notacji rgba():

Przykład:

p { color: rgba(0,0,255,0.5) }        /* półprzezroczysty jednolity niebieski */
p { color: rgba(100%, 50%, 0%, 0.1) } /* mocno przezroczysty jednolity pomarańczowy */
Jeśli aplikacja kliencka nie obsługuje wartości RGBA, to wartości te zgodnie z zasadami zgodności z przyszłymi wersjami CSS ([CSS21], rozdział 4) powinny być traktowane jako nierozpoznane. Wartości RGBA nie mogą być traktowane jako wartości RGB ze zignorowaną częścią określającą przezroczystość.

4.2.3. Słowo kluczowe transparent

W CSS 1 wprowadzono wartość transparent dla własności background-color. W CSS 2 umożliwiono przypisywanie tej wartości także własności border-color. W Open eBook(tm) Publication Structure 1.0.1 [OEB101] rozszerzono zestaw wartości własności color o słowo kluczowe transparent. W CSS 3 rozszerzono definicję wartości koloru o słowo kluczowe transparent, dzięki czemu słowa tego można używać jako wartości wszystkich własności przyjmujących wartości typu <color>. W ten sposób w CSS 3 uproszczono definicję tych własności.

transparent
Pełna przezroczystość. Słowo te można traktować jako uproszczony zapis przezroczystej czerni, rgba(0,0,0,0), która jest jego wartością obliczaną.

4.2.4. Wartości kolorów w formacie HSL

W CSS 3 jako uzupełnienie do numerycznych oznaczeń kolorów RGB dodano liczbowe oznaczenia kolorów HSL (ang. hue-saturation-lightness — barwa, nasycenie, jasność) . Zauważono, że format RGB ma następujące wady:

  • Model RGB jest zorientowany na sprzęt: odzwierciedla użycie kineskopów.
  • Model RGB jest nieintuicyjny. Ludzie mogą nauczyć się posługiwać się modelem RGB, ale raczej tylko poprzez nauczenie się odwzorowywania barwy, nasycenia i jasności na ten model.

Istnieje jeszcze kilka innych modeli kolorów. Do zalet modelu HSL zalicza się to, że jest on symetryczny pod względem jasności i ciemności (czego nie można powiedzieć np. o HSV) i łatwo można go przekształcić na RGB.

Kolory HSL definiuje się za pomocą trzech wartości (barwa, nasycenie i jasność). Barwę określa się jako kąt koła kolorów (tzn. tęczy reprezentowanej w postaci koła). Kąt ten jest mierzony w stopniach i nie ma potrzeby podawania jednostki. Jeśli chodzi o składnię, podaje się tylko wartość liczbową (<number>). Standardowo red=0=360 (czerwony), a pozostałe kolory są rozmieszczone w różnych innych miejscach na kole. Zatem green=120 (zielony), blue=240 (niebieski) itd. Wartości kąta są „przechodzące”, tzn. np. -120=240, a 480=120. Jednym ze sposobów, w jaki implementacja może znormalizować dany kąt x do przedziału <0,360) (tzn. od zera włącznie do 360 stopni) jest wykonanie działania (((x mod 360) + 360) mod 360). Nasycenie i jasność podawane są procentowo. 100% oznacza pełne nasycenie, a 0% — odcień szarości. Jasność 0% oznacza czerń, a jasność 100% — biel. Jasność 50% jest „ustawieniem normalnym”.

Przykład:

* { color: hsl(0, 100%, 50%) }   /* czerwony */
* { color: hsl(120, 100%, 50%) } /* żółty */
* { color: hsl(120, 100%, 25%) } /* ciemnozielony */
* { color: hsl(120, 100%, 75%) } /* jasnozielony */
* { color: hsl(120, 75%, 75%) }  /* pastelowy zielony itd. */

Zaletą modelu HSL w stosunku do RGB jest jego intuicyjność: kolory można zgadywać, a następnie je dostosowywać do potrzeb. Łatwiej też tworzy się zestawy pasujących do siebie kolorów (wystarczy pozostawić barwę bez zmian, a zmienić poziom jasności i nasycenia).

Jeśli nasycenie zostanie ustawione na wartość niższą od 0%, implementacje muszą sprowadzić ją do 0%. Jeśli wartość znajduje się poza gamą obsługiwaną przez urządzenie, implementacje muszą ją sprowadzić do obsługiwanej wartości. W razie możliwości powinna zostać zachowana barwa, a jeśli to niemożliwe, nie ma konkretnych wytycznych, jak należy postąpić. (Innymi słowy sprowadzenie to różni się od zastosowania zasad przycinania kolorów RGB po zastosowaniu opisanego poniżej algorytmu konwertowania kolorów HSL na RGB).

Algorytm zamieniania kolorów HSL na RGB jest prosty (tutaj zapisany w języku ABC [ABC], który został użyty do wygenerowania tabel). W tych algorytmach wszystkie trzy wartości (H, S i L) zostały znormalizowane do ułamków z przedziału 0..1:

      HOW TO RETURN hsl.to.rgb(h, s, l):
       SELECT:
	  l<=0.5: PUT l*(s+1) IN m2
	  ELSE: PUT l+s-l*s IN m2
       PUT l*2-m2 IN m1
       PUT hue.to.rgb(m1, m2, h+1/3) IN r
       PUT hue.to.rgb(m1, m2, h    ) IN g
       PUT hue.to.rgb(m1, m2, h-1/3) IN b
       RETURN (r, g, b)

    HOW TO RETURN hue.to.rgb(m1, m2, h):
       IF h<0: PUT h+1 IN h
       IF h>1: PUT h-1 IN h
       IF h*6<1: RETURN m1+(m2-m1)*h*6
       IF h*2<1: RETURN m2
       IF h*3<2: RETURN m1+(m2-m1)*(2/3-h)*6
       RETURN m1
4.2.4.1. Przykłady wartości w formacie HSL

Każda z poniższych tabel reprezentuje jedną barwę. Z koła kolorów wybrano dwanaście kolorów o regularnym odstępie co 30°: czerwony, żółty, zielony, niebieskozielony, niebieski, fuksja i wszystkie kolory pośrednie (ostatni kolor wypada między fuksją i czerwonym).

Oś X każdej tabeli reprezentuje nasycenie (100%, 75%, 50%, 25%, 0%).

Oś Y reprezentuje poziom jasności. 50% oznacza „normalną” jasność.

0° Czerwony
Nasycenie
100%75%50%25%0%
100     
88     
75     
63     
50     
38     
25     
13     
0     
30° Czerwony-Żółty (=Pomarańcz)
Nasycenie
100%75%50%25%0%
100     
88     
75     
63     
50     
38     
25     
13     
0     
60° Żółty
Nasycenie
100%75%50%25%0%
100     
88     
75     
63     
50     
38     
25     
13     
0     
90° Żółty-zielony
Nasycenie
100%75%50%25%0%
100     
88     
75     
63     
50     
38     
25     
13     
0     
120° Zielony
Nasycenie
100%75%50%25%0%
100     
88     
75     
63     
50     
38     
25     
13     
0     
150° Zielony-niebieskozielony
Nasycenie
100%75%50%25%0%
100     
88     
75     
63     
50     
38     
25     
13     
0     
180° Niebieskozielony
Nasycenie
100%75%50%25%0%
100     
88     
75     
63     
50     
38     
25     
13     
0     
210° Niebieskozielony-niebieski
Nasycenie
100%75%50%25%0%
100     
88     
75     
63     
50     
38     
25     
13     
0     
240° Niebieski
Nasycenie
100%75%50%25%0%
100     
88     
75     
63     
50     
38     
25     
13     
0     
270° Niebieski-fuksja
Nasycenie
100%75%50%25%0%
100     
88     
75     
63     
50     
38     
25     
13     
0     
300° Fuksja
Nasycenie
100%75%50%25%0%
100     
88     
75     
63     
50     
38     
25     
13     
0     
330° Fuksja-czerwony
Nasycenie
100%75%50%25%0%
100     
88     
75     
63     
50     
38     
25     
13     
0     

4.2.4. Wartości kolorów w formacie HSL

Podobnie jak notacja funkcyjna rgb() ma odpowiednik z kanałem alfa w postaci rgba(), notacja hsl() ma odpowiednik w postaci hsla(). Szczegółowe informacje na ten temat znajdują się w części proste mieszanie alfa. Wszystkie poniższe reguły określają ten sam kolor:

Przykłady:

em { color: hsl(120, 100%, 50%) }     /* zielony */
em { color: hsla(120, 100%, 50%, 1) } /* to samo, tylko z bezpośrednim ustawieniem przezroczystości na 1 */

Format wartości koloru HSLA w notacji funkcyjnej jest następujący: hsla( + barwa w stopniach + nasycenie i jasność procentowo + <alphavalue> + ). W bezpośrednim sąsiedztwie wartości liczbowych mogą znajdować się białe znaki.

Implementacje muszą obcinać składniki barwy, nasycenia i jasności kolorów HSLA do gamy obsługiwanej przez urządzenie zgodnie z zasadami dla wartości kolorów HSLA złożonych z tych składników.

Poniższe przykłady ilustrują efekt, jaki można uzyskać przy użyciu notacji hsla():

Przykłady:

p { color: hsla(240, 100%, 50%, 0.5) } /* półprzezroczysty jednolity niebieski */
p { color: hsla(30, 100%, 50%, 0.1) }  /* jednolity pomarańczowy, wysoki stopień przezroczystości */

4.3. Dodatkowe nazwy kolorów

Poniższa tabela zawiera wykaz kolorów X11 [X11COLORS], które są obsługiwane przez najczęściej używane przeglądarki. Uwzględniono także warianty ze słowami gray i grey z SVG 1.0. Poniższa lista pokrywa się z listą nazw kolorów SVG 1.0. Niniejsza specyfikacja rozszerza ich definicje poza SVG. Znajdujące się po lewej stronie dwie próbki kolorów ilustrują efekt ustawienia koloru tła komórki tabeli na dwa sposoby: w pierwszej kolumnie użyte zostały nazwy kolorów, a w drugiej — odpowiadające im wartości numeryczne.

NazwaNumerNazwa koloruSzesn. RGBDziesiętny
  aliceblue#f0f8ff240,248,255
  antiquewhite#faebd7250,235,215
  aqua#00ffff0,255,255
  aquamarine#7fffd4127,255,212
  azure#f0ffff240,255,255
  beige#f5f5dc245,245,220
  bisque#ffe4c4255,228,196
  black#0000000,0,0
  blanchedalmond#ffebcd255,235,205
  blue#0000ff0,0,255
  blueviolet#8a2be2138,43,226
  brown#a52a2a165,42,42
  burlywood#deb887222,184,135
  cadetblue#5f9ea095,158,160
  chartreuse#7fff00127,255,0
  chocolate#d2691e210,105,30
  coral#ff7f50255,127,80
  cornflowerblue#6495ed100,149,237
  cornsilk#fff8dc255,248,220
  crimson#dc143c220,20,60
  cyan#00ffff0,255,255
  darkblue#00008b0,0,139
  darkcyan#008b8b0,139,139
  darkgoldenrod#b8860b184,134,11
  darkgray#a9a9a9169,169,169
  darkgreen#0064000,100,0
  darkgrey#a9a9a9169,169,169
  darkkhaki#bdb76b189,183,107
  darkmagenta#8b008b139,0,139
  darkolivegreen#556b2f85,107,47
  darkorange#ff8c00255,140,0
  darkorchid#9932cc153,50,204
  darkred#8b0000139,0,0
  darksalmon#e9967a233,150,122
  darkseagreen#8fbc8f143,188,143
  darkslateblue#483d8b72,61,139
  darkslategray#2f4f4f47,79,79
  darkslategrey#2f4f4f47,79,79
  darkturquoise#00ced10,206,209
  darkviolet#9400d3148,0,211
  deeppink#ff1493255,20,147
  deepskyblue#00bfff0,191,255
  dimgray#696969105,105,105
  dimgrey#696969105,105,105
  dodgerblue#1e90ff30,144,255
  firebrick#b22222178,34,34
  floralwhite#fffaf0255,250,240
  forestgreen#228b2234,139,34
  fuchsia#ff00ff255,0,255
  gainsboro#dcdcdc220,220,220
  ghostwhite#f8f8ff248,248,255
  gold#ffd700255,215,0
  goldenrod#daa520218,165,32
  gray#808080128,128,128
  green#0080000,128,0
  greenyellow#adff2f173,255,47
  grey#808080128,128,128
  honeydew#f0fff0240,255,240
  hotpink#ff69b4255,105,180
  indianred#cd5c5c205,92,92
  indigo#4b008275,0,130
  ivory#fffff0255,255,240
  khaki#f0e68c240,230,140
  lavender#e6e6fa230,230,250
  lavenderblush#fff0f5255,240,245
  lawngreen#7cfc00124,252,0
  lemonchiffon#fffacd255,250,205
  lightblue#add8e6173,216,230
  lightcoral#f08080240,128,128
  lightcyan#e0ffff224,255,255
  lightgoldenrodyellow#fafad2250,250,210
  lightgray#d3d3d3211,211,211
  lightgreen#90ee90144,238,144
  lightgrey#d3d3d3211,211,211
  lightpink#ffb6c1255,182,193
  lightsalmon#ffa07a255,160,122
  lightseagreen#20b2aa32,178,170
  lightskyblue#87cefa135,206,250
  lightslategray#778899119,136,153
  lightslategrey#778899119,136,153
  lightsteelblue#b0c4de176,196,222
  lightyellow#ffffe0255,255,224
  lime#00ff000,255,0
  limegreen#32cd3250,205,50
  linen#faf0e6250,240,230
  magenta#ff00ff255,0,255
  maroon#800000128,0,0
  mediumaquamarine#66cdaa102,205,170
  mediumblue#0000cd0,0,205
  mediumorchid#ba55d3186,85,211
  mediumpurple#9370db147,112,219
  mediumseagreen#3cb37160,179,113
  mediumslateblue#7b68ee123,104,238
  mediumspringgreen#00fa9a0,250,154
  mediumturquoise#48d1cc72,209,204
  mediumvioletred#c71585199,21,133
  midnightblue#19197025,25,112
  mintcream#f5fffa245,255,250
  mistyrose#ffe4e1255,228,225
  moccasin#ffe4b5255,228,181
  navajowhite#ffdead255,222,173
  navy#0000800,0,128
  oldlace#fdf5e6253,245,230
  olive#808000128,128,0
  olivedrab#6b8e23107,142,35
  orange#ffa500255,165,0
  orangered#ff4500255,69,0
  orchid#da70d6218,112,214
  palegoldenrod#eee8aa238,232,170
  palegreen#98fb98152,251,152
  paleturquoise#afeeee175,238,238
  palevioletred#db7093219,112,147
  papayawhip#ffefd5255,239,213
  peachpuff#ffdab9255,218,185
  peru#cd853f205,133,63
  pink#ffc0cb255,192,203
  plum#dda0dd221,160,221
  powderblue#b0e0e6176,224,230
  purple#800080128,0,128
  red#ff0000255,0,0
  rosybrown#bc8f8f188,143,143
  royalblue#4169e165,105,225
  saddlebrown#8b4513139,69,19
  salmon#fa8072250,128,114
  sandybrown#f4a460244,164,96
  seagreen#2e8b5746,139,87
  seashell#fff5ee255,245,238
  sienna#a0522d160,82,45
  silver#c0c0c0192,192,192
  skyblue#87ceeb135,206,235
  slateblue#6a5acd106,90,205
  slategray#708090112,128,144
  slategrey#708090112,128,144
  snow#fffafa255,250,250
  springgreen#00ff7f0,255,127
  steelblue#4682b470,130,180
  tan#d2b48c210,180,140
  teal#0080800,128,128
  thistle#d8bfd8216,191,216
  tomato#ff6347255,99,71
  turquoise#40e0d064,224,208
  violet#ee82ee238,130,238
  wheat#f5deb3245,222,179
  white#ffffff255,255,255
  whitesmoke#f5f5f5245,245,245
  yellow#ffff00255,255,0
  yellowgreen#9acd32154,205,50

4.4. Słowo kluczowe currentColor

W specyfikacjach CSS 1 i CSS 2 wartością początkową własności border-color jest wartość własności color. W specyfikacjach tych nie zdefiniowano jednak odpowiedniego słowa kluczowego. Brak ten został spostrzeżony w SVG i w specyfikacji SVG 1.0 wprowadzono wartość currentColor dla własności fill, stroke, stop-color, flood-color oraz lighting-color. W CSS 3 rozszerzono definicję wartości koloru o słowo kluczowe currentColor, dzięki czemu słowa tego można używać jako wartości wszystkich własności przyjmujących wartości typu <color>. W ten sposób w CSS 3 uproszczono definicję tych własności.

currentColor
Wartość własności color. Wartość obliczona słowa kluczowego currentColor jest wartością obliczoną własności color. Jeśli słowo kluczowe currentColor zostanie użyte jako wartość samej własności color, ustawienie takie jest traktowane jako color: inherit.

4.5. Kolory systemowe w CSS

4.5.1. Kolory systemowe w CSS 2

Wycofywane. Specyfikacja CSS 2 oprócz zwykłego określania kolorów tekstu, tła itp. dopuszcza również możliwość definiowania kolorów w sposób zgodny ze środowiskiem graficznym użytkownika.

Jeśli w danym systemie nie ma odpowiedniej wartości, określona wartość powinna zostać zamieniona na najbliższą jej wartość systemową lub na kolor domyślny. Należy pamiętać, że niektóre profile CSS mogą w ogóle nie obsługiwać kolorów systemowych.

Poniżej znajduje się lista dodatkowych wartości, dostępnych dla własności CSS związanych z określaniem kolorów. Każdej własności przyjmującej wartości kolorów można przypisać jedną z tych wartości. Mimo że wielkość liter nie jest rozróżniana, zaleca się, aby stosować taki sam zapis, jak poniżej. Dzięki temu nazwy te są bardziej czytelne.

ActiveBorder
Obramowanie aktywnego okna.
ActiveCaption
Podpis aktywnego okna.
AppWorkspace
Kolor tła interfejsu wielodokumentowego.
Background
Tło pulpitu.
ButtonFace
Kolor tła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki jednej warstwie obramowania.
ButtonHighlight
Kolor obramowania zwróconego ku źródłu światła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki jednej warstwie obramowania.
ButtonShadow
Kolor obramowania odwróconego od źródła światła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki jednej warstwie obramowania.
ButtonText
Tekst na przyciskach.
CaptionText
Tekst w podpisie, polu rozmiaru oraz polu strzałki paska przewijania.
GrayText
Tekst elementu wyłączonego. Jeśli sterownik ekranu nie obsługuje jednolitego szarego koloru, kolor ten zostanie ustawiony na wartość #000.
Highlight
Zaznaczony element w kontrolce.
HighlightText
Tekst elementu zaznaczonego w kontrolce.
InactiveBorder
Obramowanie nieaktywnego okna.
InactiveCaption
Podpis nieaktywnego okna.
InactiveCaptionText
Kolor tekstu w nieaktywnym podpisie.
InfoBackground
Kolor tła chmurki.
InfoText
Kolor tekstu w chmurkach.
Menu
Tło menu.
MenuText
Tekst w menu.
Scrollbar
Szary obszar paska przewijania.
ThreeDDarkShadow
Kolor ciemniejszej (zazwyczaj zewnętrznej) z dwóch krawędzi obramowania odwróconego od źródła światła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki dwóm koncentrycznym warstwom obramowania.
ThreeDFace
Kolor tła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki dwóm koncentrycznym warstwom obramowania.
ThreeDHighlight
Kolor jaśniejszej (zazwyczaj zewnętrznej) z dwóch krawędzi obramowania zwróconego w kierunku źródła światła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki dwóm koncentrycznym warstwom obramowania.
ThreeDLightShadow
Kolor ciemniejszej (zazwyczaj wewnętrznej) z dwóch krawędzi obramowania zwróconego w kierunku źródła światła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki dwóm koncentrycznym warstwom obramowania.
ThreeDShadow
Kolor jaśniejszej (zazwyczaj wewnętrznej) z dwóch krawędzi obramowania odwróconego od źródła światła elementów trójwymiarowych, które wyglądają jak trójwymiarowe dzięki dwóm koncentrycznym warstwom obramowania.
Window
Tło okna.
WindowFrame
Ramka okna.
WindowText
Tekst w oknach.

Poniższa reguła ustawia kolory pierwszego planu i tła akapitów takie same, jak kolory pierwszego planu i tła okna użytkownika:

PRZYKŁADY NIEZALECANE:

p { color: WindowText; background-color: Window }
Kolory systemowe CSS 2 są wycofywane na rzecz własności appearance CSS 3 UI. Do naśladowania kolorów elementów interfejsu użytkownika należy używać własności appearance zamiast kombinacji kolorów systemowych.

4.6. Uwagi dot. używania kolorów

Mimo iż kolory mogą stanowić wartościowe uzupełnienie informacji przedstawionych w dokumencie i ułatwiać jego czytanie, należy je stosować zgodnie z wytycznymi opisanymi w dokumencie W3C Web Content Accessibility Guidelines [WCAG20].

5. Proste mieszanie alfa

Rysując elementy implementacje muszą obsługiwać wartość alfa zgodnie z zasadami opisanymi w podrozdziale 14.2 Proste mieszanie alfa specyfikacji [SVG11]. (Jeśli własności color-interpolation lub color-rendering wymienione w tej specyfikacji nie są zaimplementowane lub nie mają zastosowania, implementacje muszą działać tak, jakby miały one wartości początkowe.)

6. Przykładowy arkusz stylów dla dokumentów (X)HTML

Ten dodatek ma charakter informacyjny, nie normatywny. Poniższy arkusz stylów mógłby zostać użyty w implementacji jako standardowy arkusz stylów dla dokumentów HTML4, XHTML1, XHTML1.1, XHTML Basic i innych dokumentów z rodziny XHTML.

  html {
	color: black;
	background: white;
}

/* Tradycyjne koloru hiperłączy */
:link    { color: blue; }
:visited { color: purple; }

/* Domyślny obrys elementów aktywnych */
:focus {
	outline: 1px dotted;  /* lub 1px dotted invert */
}

7. Profile

Każda specyfikacja wykorzystująca moduł CSS3 Color musi definiować podzbiór właściwości modułu CSS3 Color, które dopuszcza i których używania zabrania oraz opisywać lokalne znaczenie wszystkich składników tego podzbioru.

Przykłady nienormatywne:

Profil CSS3 Color
SpecyfikacjaHTML4
AkceptujePodstawowe nazwy kolorów
Sześciocyfrowe szesnastkowe wartości RGB
Nie akceptuje Własności color
Własności opacity
Trzycyfrowych szesnastkowych wartości RGB i funkcyjnej notacji RGB
Wartości kolorów w notacji RGBA
Wartości kolorów w notacjach HSL i HSLA
Dodatkowych nazw kolorów
Wartości koloru currentColor
Kolorów CSS 2 UI
Wartości koloru transparent
Dodatkowe ograniczeniabrak.
Profil CSS3 Color
SpecyfikacjaCSS poziom 1
Akceptuje Własność color
Podstawowe nazwy kolorów
Wartości kolorów w formacie RGB
Nie akceptuje Własności opacity
Wartości kolorów RGBA
Wartości kolorów HSL i HSLA
Dodatkowych nazw kolorów
Wartości koloru currentColor
Kolorów CSS 2 UI Colors
Wartości koloru transparent
Dodatkowe ograniczeniabrak.
Profil CSS3 Color
SpecyfikacjaCSS poziom 2
Akceptuje Własność color
Podstawowe nazwy kolorów
Wartości kolorów w formacie RGB
CSS2 UI Colors
Wartość koloru transparent
Nie akceptuje Własności opacity
Wartości kolorów RGBA
Wartości kolorów HSL i HSLA
Dodatkowych nazw kolorów
Wartości koloru currentColor
Dodatkowe ograniczeniaWartość koloru transparent nie może być nadawana własności color.
Wartość koloru orange (jedna z dodatkowych nazw kolorów) jest akceptowana w CSS 2.1
Profil CSS3 Color
SpecyfikacjaSVG 1.0 i 1.1
AkceptujeWłasność color
Własność opacity
Podstawowe nazwy kolorów
Wartości kolorów w formacie RGB
Kolory CSS 2 UI
Dodatkowe nazwy kolorów
Wartość koloru currentColor
Nie akceptuje Wartości kolorów w formacie RGBA
Wartości kolorów w formatach HSL i HSLA
Wartości koloru transparent
Dodatkowe ograniczeniaWartość koloru currentColor nie może być przypisywana własności color.

8. Zestaw testów

Został opracowany zestaw testów dla modułu kolorów CSS, ale mogą zostać dodane kolejne testy. Zestaw ten pozwala sprawdzić czy aplikacja kliencka jest zgodna w podstawowym zakresie z niniejszą specyfikacją. Testy te nie są wyczerpujące i nie testują wszystkich możliwych wartości numerycznych kolorów. Można je znaleźć pod adresem http://www.w3.org/Style/CSS/Test/CSS3/Color/current/.

9. Wezwanie do implementowania porzuconych własności

Ze specyfikacji tej usunięto część własności, które znajdowały się w rekomendacji kandydującej z dnia 14 maja 2003 r. Mimo to wezwanie do ich implementowania pozostaje ważne, ponieważ własności te mogą zostać dodane do przyszłych wersji tej specyfikacji, jeśli powstaną odpowiednie implementacje i zestawy testów pozwalające zweryfikować ich interoperacyjność. Do własności tych należą:

10. Podziękowania

Dziękujemy Bradowi Pettitowi za napisanie i zaimplementowanie profili kolorów. Dziękujemy Stevenowi Pembertonowi za opis kolorów HSL. Dziękujemy za komentarze następującym osobom: Marc Attinasi, Bert Bos, Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan Lesch, Alex LeDonne, Cameron McCormack, Krzysztof Maczyński, Chris Moschini, Chris Murphy, Christoph Päper, David Perrell, Jacob Refstrup, Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, podgrupa XSL FO grupy roboczej XSL oraz cała społeczność www-style. Dodatkowo dziękujemy Chrisowi Lilleyowi za pełnienie funkcji eksperta ds. kolorów CSS.

11. Zmiany

Niniejszy dokument różni się od proponowanej rekomendacji z dnia 28 października 2010 r. następującymi elementami: data, status oraz styl zostały dostosowane do rekomendacji W3C, zaktualizowano odwołania.

12. Źródła

12.1. Źródła normatywne

[COLORIMETRY]
Colorimetry, Third Edition. CIE 15:2004. ISBN 978-3-901906-33-6
[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607
[SRGB]
Multimedia systems and equipment – Colour measurement and management – Part 2-1: Colour management – Default RGB colour space – sRGB. IEC 61966-2-1 (1999-10) ISBN: 2-8318-4989-6 – ICS codes: 33.160.60, 37.080 – TC 100 – 51 pp. as amended by Amendment A1:2003. URL: http://www.colour.org/tc8-05/Docs/colorspace/61966-2-1.pdf
[SVG11]
Jon Ferraiolo et al. Scalable Vector Graphics (SVG) 1.1. 14 January 2003. W3C Recommendation. URL: http://www.w3.org/TR/2003/REC-SVG11-20030114/

12.2. Źródła informacyjne

[ABC]
Leo Geurts; Lambert Meertens; Steven Pemberton. The ABC Programmer’s Handbook. Prentice-Hall. ISBN: 0-13-000027-2. URL: http://www.cwi.nl/~steven/abc
[CSS2]
Ian Jacobs; et al. Cascading Style Sheets, level 2 (CSS2) Specification. 11 April 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-CSS2-20080411
[CSS3UI]
Tantek Çelik. CSS3 Basic User Interface Module. 11 May 2004. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2004/CR-css3-ui-20040511
[HTML401]
David Raggett; Ian Jacobs; Arnaud Le Hors. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
[OEB101]
Open eBook(tm) Publication Structure 1.0.1. Open eBook Forum(tm). 02 July 2001. URL: http://www.openebook.org/oebps/oebps1.0.1/download/oeb101-xhtml.htm
[SVG10]
Jon Ferraiolo. Scalable Vector Graphics (SVG) 1.0 Specification. 4 September 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-SVG-20010904
[WCAG20]
Michael Cooper; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 11 December 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-WCAG20-20081211
[X11COLORS]
X11 Color Names URL: http://en.wikipedia.org/wiki/X11_color_names
[XML10]
C. M. Sperberg-McQueen; et al. Extensible Markup Language (XML) 1.0 (Fifth Edition). 26 November 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-xml-20081126/

Indeks

Indeks własności

WłasnośćWartościWartość domyślnaZastosowanieDz.Wartości procentoweMedia
color<color> | inheritzależna od aplikacji klienckiejwszystkie elementytaknie dotyczywizualne
opacity<alphavalue> | inherit1wszystkie elementynienie dotyczywizualne

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *