CSS3. Moduł kolorów

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
• 2.Zależności
• 3. Własności koloru
  • 3.1. Kolor pierwszego planu: własność color
  • 3.2. Przezroczystość: własność opacity
• 4. Jednostki kolorów
  • 4.1. Podstawowe nazwy kolorów
  • 4.2. Liczbowe wartości kolorów
    • 4.2.1. Wartości kolorów w formacie RGB
    • 4.2.1. Wartości kolorów w formacie RGBA
    • 4.2.3.Słowo kluczowe transparent
    • 4.2.4. Wartości kolorów w formacie HSL
      • 4.2.4.1. Przykłady wartości w formacie HSL
    • 4.2.4. Wartości kolorów w formacie HSL
  • 4,3. Dodatkowe nazwy kolorów
  • 4.4. Słowo kluczowe currentColor
  • 4.5. Kolory systemowe w CSS
    • 4.5.1. Kolory systemowe w CSS 2
  • 4.6. Uwagi dot. używania kolorów
• 5. Proste mieszanie alfa
• 6. Przykładowy arkusz stylów dla dokumentów (X)HTML
• 7. Profile
• 8. Zestaw testów
• 9. Wezwanie do implementowania porzuconych własności
• 10.Podziękowania
• 11. Zmiany
• 12. Źródła
  • 12.1. Źródła normatywne
  • 12.2.Źródła informacyjne
• Indeks
• Indeks własnoś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.

• HTML 4.01 [HTML401]
• CSS 2.0 [CSS2]
• SVG 1.0 [SVG10]
• Interfejs użytkownika dla CSS 3 (16 lutego 2000) [CSS3UI]

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

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.

<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.

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 */

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ść.

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.

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 }

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].

• 1.4.1 Używanie kolorów: kolor nie powinien być jedynym sposobem przekazania informacji, wskazania czynności, zachęty do reakcji ani wyróżnienia elementu wizualnego.

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: