CSS3. Moduł kolorów

> Dodaj do ulubionych
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.

Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. Mają zastosowanie następujące zasady W3C: odpowiedzialność, znak towarowy, używanie dokumentu.

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
Nazwa Numer Nazwa koloru Szesn. RGB Dziesiętny
    black #000000 0,0,0
    silver #C0C0C0 192,192,192
    gray #808080 128,128,128
    white #FFFFFF 255,255,255
    maroon #800000 128,0,0
    red #FF0000 255,0,0
    purple #800080 128,0,128
    fuchsia #FF00FF 255,0,255
    green #008000 0,128,0
    lime #00FF00 0,255,0
    olive #808000 128,128,0
    yellow #FFFF00 255,255,0
    navy #000080 0,0,128
    blue #0000FF 0,0,255
    teal #008080 0,128,128
    aqua #00FFFF 0,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.

Nazwa Numer Nazwa koloru Szesn. RGB Dziesiętny
    aliceblue #f0f8ff 240,248,255
    antiquewhite #faebd7 250,235,215
    aqua #00ffff 0,255,255
    aquamarine #7fffd4 127,255,212
    azure #f0ffff 240,255,255
    beige #f5f5dc 245,245,220
    bisque #ffe4c4 255,228,196
    black #000000 0,0,0
    blanchedalmond #ffebcd 255,235,205
    blue #0000ff 0,0,255
    blueviolet #8a2be2 138,43,226
    brown #a52a2a 165,42,42
    burlywood #deb887 222,184,135
    cadetblue #5f9ea0 95,158,160
    chartreuse #7fff00 127,255,0
    chocolate #d2691e 210,105,30
    coral #ff7f50 255,127,80
    cornflowerblue #6495ed 100,149,237
    cornsilk #fff8dc 255,248,220
    crimson #dc143c 220,20,60
    cyan #00ffff 0,255,255
    darkblue #00008b 0,0,139
    darkcyan #008b8b 0,139,139
    darkgoldenrod #b8860b 184,134,11
    darkgray #a9a9a9 169,169,169
    darkgreen #006400 0,100,0
    darkgrey #a9a9a9 169,169,169
    darkkhaki #bdb76b 189,183,107
    darkmagenta #8b008b 139,0,139
    darkolivegreen #556b2f 85,107,47
    darkorange #ff8c00 255,140,0
    darkorchid #9932cc 153,50,204
    darkred #8b0000 139,0,0
    darksalmon #e9967a 233,150,122
    darkseagreen #8fbc8f 143,188,143
    darkslateblue #483d8b 72,61,139
    darkslategray #2f4f4f 47,79,79
    darkslategrey #2f4f4f 47,79,79
    darkturquoise #00ced1 0,206,209
    darkviolet #9400d3 148,0,211
    deeppink #ff1493 255,20,147
    deepskyblue #00bfff 0,191,255
    dimgray #696969 105,105,105
    dimgrey #696969 105,105,105
    dodgerblue #1e90ff 30,144,255
    firebrick #b22222 178,34,34
    floralwhite #fffaf0 255,250,240
    forestgreen #228b22 34,139,34
    fuchsia #ff00ff 255,0,255
    gainsboro #dcdcdc 220,220,220
    ghostwhite #f8f8ff 248,248,255
    gold #ffd700 255,215,0
    goldenrod #daa520 218,165,32
    gray #808080 128,128,128
    green #008000 0,128,0
    greenyellow #adff2f 173,255,47
    grey #808080 128,128,128
    honeydew #f0fff0 240,255,240
    hotpink #ff69b4 255,105,180
    indianred #cd5c5c 205,92,92
    indigo #4b0082 75,0,130
    ivory #fffff0 255,255,240
    khaki #f0e68c 240,230,140
    lavender #e6e6fa 230,230,250
    lavenderblush #fff0f5 255,240,245
    lawngreen #7cfc00 124,252,0
    lemonchiffon #fffacd 255,250,205
    lightblue #add8e6 173,216,230
    lightcoral #f08080 240,128,128
    lightcyan #e0ffff 224,255,255
    lightgoldenrodyellow #fafad2 250,250,210
    lightgray #d3d3d3 211,211,211
    lightgreen #90ee90 144,238,144
    lightgrey #d3d3d3 211,211,211
    lightpink #ffb6c1 255,182,193
    lightsalmon #ffa07a 255,160,122
    lightseagreen #20b2aa 32,178,170
    lightskyblue #87cefa 135,206,250
    lightslategray #778899 119,136,153
    lightslategrey #778899 119,136,153
    lightsteelblue #b0c4de 176,196,222
    lightyellow #ffffe0 255,255,224
    lime #00ff00 0,255,0
    limegreen #32cd32 50,205,50
    linen #faf0e6 250,240,230
    magenta #ff00ff 255,0,255
    maroon #800000 128,0,0
    mediumaquamarine #66cdaa 102,205,170
    mediumblue #0000cd 0,0,205
    mediumorchid #ba55d3 186,85,211
    mediumpurple #9370db 147,112,219
    mediumseagreen #3cb371 60,179,113
    mediumslateblue #7b68ee 123,104,238
    mediumspringgreen #00fa9a 0,250,154
    mediumturquoise #48d1cc 72,209,204
    mediumvioletred #c71585 199,21,133
    midnightblue #191970 25,25,112
    mintcream #f5fffa 245,255,250
    mistyrose #ffe4e1 255,228,225
    moccasin #ffe4b5 255,228,181
    navajowhite #ffdead 255,222,173
    navy #000080 0,0,128
    oldlace #fdf5e6 253,245,230
    olive #808000 128,128,0
    olivedrab #6b8e23 107,142,35
    orange #ffa500 255,165,0
    orangered #ff4500 255,69,0
    orchid #da70d6 218,112,214
    palegoldenrod #eee8aa 238,232,170
    palegreen #98fb98 152,251,152
    paleturquoise #afeeee 175,238,238
    palevioletred #db7093 219,112,147
    papayawhip #ffefd5 255,239,213
    peachpuff #ffdab9 255,218,185
    peru #cd853f 205,133,63
    pink #ffc0cb 255,192,203
    plum #dda0dd 221,160,221
    powderblue #b0e0e6 176,224,230
    purple #800080 128,0,128
    red #ff0000 255,0,0
    rosybrown #bc8f8f 188,143,143
    royalblue #4169e1 65,105,225
    saddlebrown #8b4513 139,69,19
    salmon #fa8072 250,128,114
    sandybrown #f4a460 244,164,96
    seagreen #2e8b57 46,139,87
    seashell #fff5ee 255,245,238
    sienna #a0522d 160,82,45
    silver #c0c0c0 192,192,192
    skyblue #87ceeb 135,206,235
    slateblue #6a5acd 106,90,205
    slategray #708090 112,128,144
    slategrey #708090 112,128,144
    snow #fffafa 255,250,250
    springgreen #00ff7f 0,255,127
    steelblue #4682b4 70,130,180
    tan #d2b48c 210,180,140
    teal #008080 0,128,128
    thistle #d8bfd8 216,191,216
    tomato #ff6347 255,99,71
    turquoise #40e0d0 64,224,208
    violet #ee82ee 238,130,238
    wheat #f5deb3 245,222,179
    white #ffffff 255,255,255
    whitesmoke #f5f5f5 245,245,245
    yellow #ffff00 255,255,0
    yellowgreen #9acd32 154,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
Specyfikacja HTML4
Akceptuje Podstawowe 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 ograniczenia brak.
Profil CSS3 Color
Specyfikacja CSS 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 ograniczenia brak.
Profil CSS3 Color
Specyfikacja CSS 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 ograniczenia Wartość 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
Specyfikacja SVG 1.0 i 1.1
Akceptuje Wł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 ograniczenia Wartość 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ści Wartość domyślna Zastosowanie Dz. Wartości procentowe Media
color <color> | inherit zależna od aplikacji klienckiej wszystkie elementy tak nie dotyczy wizualne
opacity <alphavalue> | inherit 1 wszystkie elementy nie nie dotyczy wizualne

Dodaj komentarz

19 − czternaście =