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.

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] 鈥treszczenie 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

Dodaj komentarz

osiemna艣cie − sze艣膰 =