Culori în CSS Modul Nivelul 3

Abstract

CSS (Cascading Style Sheets) este un limbaj folosit pentru a descrie redarea fișierelor HTML si XML pe ecran, pe hârtie, în vorbire, etc. Acesta folosește propietăți pentru culori și valori pentru a colora textul, fundalurile, bordurile, si alte parți ale elementelor într-un document. Această specificare descrie valorile culorilor si propietățile pentru fațadă și opacitatea grupului. Acest document include și propietăți si valori de la Nivelul 2 de CSS și valori noi.

Starea acestui document.

Această secțiune descrie starea acestui document la momentul publicării. Alte documente mai noi pot exista. O listă cu toate publicăriile curente W3C și ultimele revizii a acestui raport tehnic pot fi găsite în W3C technical reports index la http://www.w3.org/TR/.

Lista de conversații publică si(arhivată) www-style@w3.org (vezi instrucțiuni) este recomandată pentru discuții despre aceste specificații. Când trimiteți un mesaj, vă rugăm să plasați în textul subiectului “css3-color”, de preferat așa: “[css3-color] …sumar al mesajului…”

Acest document a fost creat de CSS Working Group (parte a Style Activity).

Un raport de implementare separat conține o suită de teste si arată cum fiecare test din suita de teste a fost validat prin măcar două implementări independente.

O listă cu toate comentariile la cea mai recentă ciornă de ultim moment care explică modificările care au fost realizate până în momentul realizării ciornei. Comentarile primite în timpul perioadei de Recomandări pentru Candidat (pentru ciorna din 14 Mai 2003) si cum au fost ele adresate în acestă ciornă pot fi găsite în dispoziția de comentarii. Comentarile primite în timpul perioadei de Recomandări pentru Candidat (pentru ciorna din 14 Februarie 2003) si cum au fost ele adresate în acestă ciornă pot fi găsite în dispoziția de comentarii.

O listă completă de modificări a acestui document este disponibilă.

Acest document a fost revizuit de către Membrii W3C, de dezvoltatorii de programe, și de către alte grupuri W3C și parți interesate, și a fost aprobat de către Director ca o Recomandare W3C. Este un document stabil și poate fi folosit ca material de referință sau citat în alt document. Rolul W3C în realizarea Recomandării este de a atrage atenția asupra specificațiilor si de a promova răspândirea ei în lume. Acest lucru îmbunătățește funcționalitate si interoperabilitatea Web-ului.

Acest document a fost realizat de un grup operativ sub incidența 5 February 2004 W3C Patent Policy. W3C menține o listă publică cu toate informațiile a oricărui brevet de invenție. realizat în legătură cu realizările grupului; pagina respectivă conține deasemenea și instrucțiuni pentru publicarea unui brevet de invenție. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

Cuprins

• 1. Introducere
• 2. Dependențe
• 3. Propietățiile culorile
  • 3.1. Culoarea de prim plan: proprietatea‘color’
  • 3.2. Transparența: proprietatea ‘opacity’
• 4. Unități de culoare
  • 4.1. Cuvintele cheie de bază pentru culori
  • 4.2. Valori numerice pentru culoare
    • 4.2.1. RGB color values
    • 4.2.2. Valori RGBA pentru culori
    • 4.2.3. ‘transparent’ cuvânt cheie pentru culoare
    • 4.2.4. Valori HSL pentru culoare
      • 4.2.4.1. Exemple HSL
    • 4.2.5. Valori HSLA pentru culoare
  • 4.3. Cuvinte cheie existinse pentru culoare
  • 4.4. Cuvântul cheie ‘currentColor’
  • 4.5. Sistemul de culori CSS
    • 4.5.1. Sistemul de culori CSS2
  • 4.6. Mențiuni privind utilizarea culorilor
• 5. Compunerea simplă alpha
• 6. Exemplu de foaie de stil pentru (X)HTML
• 7. Profile
• 8. Suita de teste
• 9. Cerere pentru Implementări ale funcționalităților refuzate
• 10. Mulțumiri
• 11. Modificări
• 12. Referințe
  • 12.1. Normativ
  • 12.2. Informativ
• Indice
• Indicele de proprietate

1. Introducere

CSS dincolo de nivelul 2 este un set de module, împărţite pentru a permite caietului de sarcini pentru o dezvoltare treptată, împreună cu implementările lor. Această specificaţie este una dintre acele module.

Acest modul descrie proprietățile CSS care permit autorilor să specifice culoarea de prim plan și opacitatea unui element. Acest modul descrie deasemnea în detaliu tipul de valoare CSS <color> .

Nu numai că definește proprietățile și valorile legate de culoare care deja există în CSS1 și CSS2, dar deasemenea definește proprietăți și valori noi.

Grupul de lucru nu se aşteaptă ca toate implementările de CSS3 vor pune în aplicare toate proprietăţile sau valorile. În schimb, va exista cel mai probabil probabil, un număr mic de variante de CSS3, aşa-numitele "profile". De exemplu, poate fi numai faptul că profilul pentru agenții de utilizator pe culori de 32-biţi vor include toate proprietășile de legate de culoare şi valori.

Caietul de sarcini este rezultatul fuziunii a unor părţi relevante din următoarele Recomandări şi Proiecte de Lucru, precum şi adăugarea unor noi caracteristici.

• HTML 4.01 [HTML401]
• CSS 2.0 [CSS2]
• SVG 1.0 [SVG10]
• Interfețe de utilizator pentru CSS3 (16 Februarie 2000) [CSS3UI]

2. Dependențe

Terminologie suplimentară este definită în Definiții secțiune a [CSS21]. Exemple surse de cod ale documentelor și fragmente sunt oferite în XML [XML10] sau sintaxa HTML [HTML401].

3. Propietățile culorilor

3.1. Culori de prim plan: proprietatea ‘color’

Această proprietate descrie culoarea de prim plan a conținutului text a unui element. În plus este folosit pentru a obține potențiale valori indirecte (currentColor) pentru oricare alte proprietăți care acceptă valori de culori. Dacă cuvântul cheie ‘currentColor’ este setat pe proprietatea ‘color’ însine, este tratat ca ‘color: inherit’.

Sunt multe metode de a specifica culoarea lime green:

em { color: lime }               /* color keyword */
em { color: rgb(0,255,0) }       /* RGB range 0-255   */

<color>

Unitățile de culoare sunt definite în următoarea secțiune.

3.2. Transparența: proprietatea ‘opacity’

Opacitatea poate fi gândită ca o operaţiune de postprocesare. Conceptual, după element (inclusiv urmaşii săi), este redată într-o imagine offscreen RGBA, setarea opacității specifică modul în care se amestecă randarea offscreen în randarea compozit curentă. Vezi compunerea simplă alpha pentru detalii.

<alphavalue>

Din punct de vedere a sintaxei un <număr>. Setarea uniformă de opacitatea care urmează să fie aplicată pe un obiect întrg. Orice altă valoare din afara marjei 0.0 (complet transparent) la 1.0 (complet opac) va fi fixată la această marjă. Dacă obiectul este un element recipient, atunci efectul este ca și cum conținuturile elementului recipient s-au amestecat în fundal folosind o mască unde valoarea fiecărui pixel al maștii este <alphavalue>.

Din moment ce un element cu opacitatea mai mică de 1 este compus dintr-o singură imagine offscreen, conținutul exterior din afara lui nu poate fi stratificat în ordine z între bucățile de conținut din afara lui. Din același motiv, implementările trebuie să creeze o nouă stivă context pentru orice element cu opacitatea mai mică de 1. Dacă un element cu opacitatea mai mică de 1 nu este poziționat, implementările trebuie să deseneze stratul care îl crează, în interiorul stivei de context părinte, la aceași ordine a stivei la care ar fi fost folosit dacă era un element pozitionat cu ‘z-index: 0’ și ‘opacity: 1’. Dacă un element cu opacitatea mai mică de 1 este poziționat, proprietatea ‘z-index’ se aplică așa cum este descris în [CSS21], cu excepția că ‘auto’ este tratat ca ‘0’ din moment ce o nouă stivă context este mereu creată. Vezi secțiunea 9.9 și Apendicele E din [CSS21] pentru mai multe informații despre stivele de context. Regulile din acest paragraf nu se aplică pe elementele SVG, din moment ce SVG are propriul model de randare ([SVG11], Capitolul 3).

4. Unități de culoare

O <color> este fie un cuvânt cheie sau o specificație numerică.

4.1. Cuvinte cheie de culori standard

Lista de cuvinte cheie pentru culori este: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, și yellow. Numele de culori nu sunt sensibile la litere mari.

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

4.2. Valori numerice de culoare

4.2.1. Valori de culoare RGB

Modelul de culori RGB este folosit în specificări ca o culoare numerică. Aceste exemple folosesc aceași culoare:

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

Formatul unei valori RGB în notarea hexadecimală este ‘#’ urmată imediat de fie trei sau 6 caractere hexadecimale. Notația RGB cu 3 cifre (#rgb) este transformată în forma sa de șase cifre (#rrggbb) prin copierea cifrelor, și nu prin adăugarea de zerouri. De exemplu, #fb0 se extinde în #ffbb00. Acest lucru asigură că albul(#ffffff) poate fi specificat folosind notarea scurtată (#fff) și înlătură orice dependență the adâncimea de culoare a ecranului.

Formatul unei valori RGB în notație funcțională este ‘rgb(’ urmată de o listă de 3 valori numerice despărțite prin virgulă (fie trei valori întregi sau treci procentaje) urmate de ‘)’. Valoarea întreagă 255 corespunde valorii 100%, și către F sau FF în notația hexadecimală: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Spațiile albe sunt permise în jurul valorilor numerice.

Toate culorile RGB sunt specificate în paleta de culori sRGB (vezi [SRGB]). Agenții de utilizator pot să varieze în fidelitatea cu care reprezintă aceste culori, dar folosind sRGB avem o definiție masurabilă obiectiv și neambiguu a culorilor, care poate fi relaționat la standardele internaționale (vezi [COLORIMETRY]).

Valorile din afara gamei de culori a dispozitivului vor fi adapatate gamei de culori când gama de culori este cunoscută: roșul, verdele, și albastrul trebuie să fie schimbate pentru a intra în marja suportată de dispozitiv. Agenții de utilizatori pot să realizeze o mapare de înaltă calitate a culorilor de la o gamă de culori la alta. Această specificare nu prezintă un comportament precis a adaptării culorilor. Pentru o monitor normal CRT, a cărui gamă de culori este la fel ca sRGB, următoarele patru reguli sunt echivalente:

em { color: rgb(255,0,0) }       /* integer range 0 - 255 */
em { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
em { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */

Alte dispozitive, cum ar fi imprimantele, au game diferite față de sRGB; câteva culori în afara marjei sRGB 0..255 vor fi reprezentate (înăuntru gamei dispozitivului) , în timp ce alte culori din cadrul marjei sRGB 0.255 vor fi înafara gamei de culori a dispozitivului și prin urmare nu vor fi mapate.

4.2.2. Valori de culori RGBA

Modelul de culoare RGB este extins în această specificație pentru a include “alpha” permițând specificarea opacității unei culori. Vezi compunerea simplă alpha pentru detalii. Aceste exemple folosesc toate aceași culoare:

em { color: rgb(255,0,0) }      /* integer range 0 - 255 */
em { color: rgba(255,0,0,1)     /* the same, with explicit opacity of 1 */
em { color: rgb(100%,0%,0%) }   /* float range 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */

Față de valorile RGB, nu există o notare hexadecimală pentru o valoare RGBA.

Formatul unei valori RGBA în notația funcțională este ‘rgba(’ urmat de o listă despărțită prin virgulă de trei valori numerice (fie trei numere întregi sau procentaje ), urmate de un <alphavalue>, urmate de ‘)’. Valoarea întreagă 255 corespunde valorii 100%, rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8). Spațiile albe sunt permise în jurul valorilor numerice.

Implementările trebuie să taie componentele ros,verde, și albastru din valorile culorii RGBA pe gama de culori a dispozitivelor în concordanță cu regulile pentru valorile de culoare RGB compuse din acele componente.

Aceste exemple specifică efectele posibile folosind notația rgba():

p { color: rgba(0,0,255,0.5) }        /* semi-transparent solid blue */
p { color: rgba(100%, 50%, 0%, 0.1) } /* very transparent solid orange */

Mențiune. Dacă valorile RGBA nu sunt suportate de un agent de utilizator, ele trebuie tratate ca valori nerecunoscute de regulile de parsare CSS. ([CSS21], Capitolul 4). Valorile RGBA trebuie să nu fie tratate simplu la fel ca niște valori RBG ignorand proprietatea opacity.

4.2.3. cuvântul cheie de culoare ‘transparent’

CSS1 introduce valoarea ‘transparent’ pentru proprietatea background-color . CSS2 permite border-color să accepte valoarea ‘transparent’ . The Open eBook(tm) Publication Structure 1.0.1 [OEB101] extinde proprietatea ‘color’ cât să accepte cuvântul cheie ‘transparent’. CSS3 extinde valoarea culorii astfel încât să cuprindă cuvântul cheie ‘transparent’ permițând folosirea lui cu toate proprietățile care acceptă o valoare <color>. Acest lucru simplifică definirea acestor proprietăți în CSS3.

transparent

Total transparent. Acest cuvânt cheie poate fi folositor pentru transparent black, rgba(0,0,0,0), care este valoarea sa calculată.

4.2.4. Valori de culori HSL

CSS3 adaugă culori numerice nuanță-saturație-luminozitate (HSL) ca un complementar la valorile numerice RGB. A fost observat faptul că culorile RGB au urmatoarele limitări:

• RGB este orientat spre componentele fizice: reflectă folosirea CRT-urilor.
• RGB nu este intuitiv. Oamenii pot învăța cum să folosească RGB, dar de fapt prin internaționalizare cum se traduce nuanța, saturația și luminozitatea, sau ceva asemănător, către RGB.

Sunt alte câteva scheme de culori posibile. Câteva avantaje ale HSL sunt faptul că luminozitatea și înegrirea sunt simetrice (care nu este cazul la HSV de exemplu) , și este trivial sa transformăm HSL în RGB.

Culorile HSL sunt encodate ca un triplet (nuanță, saturație, luminozitate). Nuanța este reprezentată ca un unghi din paleta de culori (de exemplu: curcubeul reprezentat într-un cerc). Acest unghi este deobicei măsurat in grade, unitate folosită implicit în CSS; din punct de vedere a sintaxei, doar un <număr> este dat. Prin definiție roșu=0=360, și celelalte culori sunt împrăștiate în jurul cercului, deci verde = 120, albastru = 240, s.a.m.d. Ca un unghi, implicit îmbracă valori cum ar fi -120=240 și 480=120. O metodă de implementare ar putea fi normalizarea unui astfel de unghi x la o gamă de valori [0,360] (de exemplu zero grade, inclusiv, la 360 grade, exclusiv) este de a calcula (((x mod 360) + 360) mode 360). Saturația și luminozitatea sunt reprezentate ca procentaje. 100% reprezintă saturația maximă, și 0% este doar o urma de gri. 0% luminozitate este negru, 100% luminozitate este alb, și 50% luminozitate este “normal”.

Deci de exemplu:

* { color: hsl(0, 100%, 50%) }   /* red */
* { color: hsl(120, 100%, 50%) } /* lime */ 
* { color: hsl(120, 100%, 25%) } /* dark green */ 
* { color: hsl(120, 100%, 75%) } /* light green */ 
* { color: hsl(120, 75%, 75%) }  /* pastel green, and so on */

Avantajele folosirii HSL față de RGB este intuitivitatea evidentă: poți să ghicești la ce culori dorești, și apoi să alterezi. Este deasemnea ușor să creezi seturi de culori potrivite (prin păstrarea nuanței la aceeași valoare și variind luminozitatea/întunecarea, și saturația)

Dacă saturația este mai mică de 0%, implementarea trebuie să o taie la 0%. Dacă valuarea rezultată este în afara gamei de valori, implementarea trebuie să o taie la gama dispozitivului. Această tăiere trebuie să mențină nuanța atunci când este posibil, în caz contrar este nedefinit. (Cu alte cuvinte, tăierea este diferită de la aplicarea regulilor de tăiere a culorilor RGB după aplicarea algoritmului de mai jos pentru transpunerea HSL în RGB.)

Algoritmul pentru a traduce HSL în RGB este simplu (aici exprimat în ABC [ABC] care a fost folosit pentru a genera tabelele.) În aceste algoritmuri, toate cele trei valori (H, S și L) au fost normalizate la fracții 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. Exemple HSL

Fiecare tabel de mai jos reprezintă o nuanță. Doisprezece culori distanțate egal (de exemplu la un interval de 30°) au fost alese din cercul de culori: roșu, galben, verde, cyan, albastru,magenta, cu toate culorile intermediare (ultima este culoarea dintre roșu și magenta).

Axa X din fiecare tabel reprezintă saturația (100%, 75%, 50%, 25%, 0%).

Axa Y reprezintă luminozitatea. 50% este “normal”.

4.2.5. Valorile culorilor HSLA

La fel ca notarea funcțională ‘rgb()’ are ‘rgba()’ omologul alpha, notarea funcțională ‘hsl()’ are ‘hsla()’ omologul alpha. Vezi compunerea simplă alpha pentru detalii. Aceste exemple specifică aceeași culoare:

em { color: hsl(120, 100%, 50%) }     /* green */
em { color: hsla(120, 100%, 50%, 1) } /* the same, with explicit opacity of 1 */

Formatul unei valori de culoare HSLA în notația funcțională este ‘hsla(’ urmat de nuantă în procente, saturație si luminozitate, și <alphavalue>, urmată de ‘)’. Spațiile albe sunt permise în jurul valorilor numerice.

Implementările trebuie să taie nuanța, saturația, si luminozitatea componentelor a valorilor de culoare HSLA către gama de dispozitive în concordanță cu regulile pentru valorile compuse de culori HSLA a acelor componente.

Aceste exemple ilustrează efectele care sunt posibile cu notația hsla():

p { color: hsla(240, 100%, 50%, 0.5) } /* semi-transparent solid blue */
p { color: hsla(30, 100%, 50%, 0.1) }  /* very transparent solid orange */

4.3. Cuvinte cheie extinse de culoare

Tabelul următor oferă o listă ce conține culori X11 [X11COLORS] suportate de cele mai populare programe de navigare cu specificația pentru variațiile de gri (gray/grey) din SVG 1.0. Lista rezultată este exact aceasi cu SVG 1.0 color keyword names. Această specificație extinde definiția lor dincolo de SVG. Cele două mostre de culoare de pe stânga ilustrează stabilirea culorii de fundal pentru o celulă de tabel în două moduri: prima coloană utilizează valoarea de nume a culoarii, şi a doua coloană utilizează valoarea respectivă de culoare numerică.

4.4. Cuvântul cheie ‘currentColor’

CSS1 și CSS2 definesc valorile inițiale a proprietății ‘border-color’ să fie valoarea proprietății ‘color’ dar nu a definit un cuvânt cheie corespunzător. Această omisiune a fost recunoscută de SVG, și astfel SVG 1.0 a introdus valoarea ‘currentColor’ pentru proprietățile ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’, and ‘lighting-color’. CSS3 extinde valoarea culorii astfel încât să includă cuvântul cheie ‘currentColor’ care să permitp folosirea ei cu toate proprietățile care acceptă o valoare <color> . Acest lucru simplifică definirea acestor proprietăți în CSS3.

currentColor

Valoarea proprietății ‘color’. Valoarea calculatp a cuvântului cheie ‘currentColor’ este valoarea calculată din proprietatea ‘color’ property. Dacă cuvântul cheie ‘currentColor’ este setat pe proprietatea însăși ‘color’ , este tratat ca ‘color: inherit’.

4.5. Sistemul de culori CSS

4.5.1. Sistemul de culori CSS2

Învechit. În plus faţă de posibilitatea de a atribui valori de cuvinte cheie de culoare la text, fundaluri, etc., CSS2 a permis autorilor de a specifica culorile într-o manieră care să le poate integra în mediul grafic al utilizatorului.

Pentru sistemele care nu au o valoare corespunzătoare, valoarea specificată ar trebui sa fie mapată la cea mai apropiată valoare din sistemul de culori, sau la o culoare predefinită. Rețineți că unele profile de CSS nu suportă Sistemul de Culori deloc.

În continuare avem o listare cu valorile suplimentare pentru valorile de culoare CSS și semnificația lor generală. Orice proprietate de culoare poate să aibă unul din urmatoarele nume. Chiar dacă acestea nu sunt sensibile la litere mari/mici, este recomandat scrierea cu mixtă cu majuscule așa cum este prezentat mai jos, pentru a face numele mult mai lizibile.

ActiveBorder

Conturul unei ferestre active.

ActiveCaption

Legenda unei ferestre active.

AppWorkspace

Culoarea de fundal a mai multor interfețe de document.

Background

Fundal de desktop.

ButtonFace

Culoarea principală de fundal pentru elementele 3-D care apar 3-D din cauza unui strat de contur.

ButtonHighlight

Culoarea conturului față de sursa de lumină a elementelor 3-D care apar 3-D din cauza unui strat de contur.

ButtonShadow

Culoarea conturului departe de sursa de lumină a elementelor 3-D care apar 3-D din cauza a unui strat de contur.

ButtonText

Textul de pe butoanele de apasare.

CaptionText

Text în legendă, dimensiunea cutiei, și sageta din cutia a elementului de derulare.

GrayText

Textul gri (dezactivat). Această culoare este setată la #000 dacă driver-ul curent de afișare nu suportă o culoare plină gri.

Highlight

Element(e) selectate într-un control.

HighlightText

Textul unui element(e) selectat într-un control.

InactiveBorder

Conturul inactiv a unei ferestre.

InactiveCaption

Legenda inactivă a unei ferestre.

InactiveCaptionText

Culoarea textului într-un legendă inactivă.

InfoBackground

Culoarea de fundal pentru controalele tooltip.

InfoText

Culoarea de text pentru controalele de tooltip.

Menu

Fundalul meniului.

MenuText

Text în meniuri.

Scrollbar

Suprafața gri din bara de derulare.

ThreeDDarkShadow

Culoarea conturului mai închisă (deobicei cea exterioară) din cele două contururi departe de sursa de lumină pentru elementele 3-D care apar 3-D din cauza a două straturi concentrice de contururi.

ThreeDFace

Culoarea principală de fundal pentru elementele 3-D care apar 3-D din cauza a două straturi concentrice de contururi.

ThreeDHighlight

Culoarea conturului mai deschisă (deobicei cea exterioară) din cele două contururi confruntată cu sursa de luminp pentru elementele 3-D care apar 3-D din cauza a două straturi concentrice de contururi.

ThreeDLightShadow

Culoarea conturului mai închisă (deobicei cel interior) din cele două contururi confruntată cu sursa de lumină pentru elementele 3-D care apar 3-D din cauza a două straturi concentrice de contururi.

ThreeDShadow

Culoarea conturului mai deschisă (deobicei cel interior) din cele două contururi departe de sursa de lumină pentru elementele 3-D care apar ca 3-D din cauza a două straturi concetrice de contururi.

Window

Fundalul de ferestră.

WindowFrame

Suprafața ferestri.

WindowText

Text în fereastră.

p { color: WindowText; background-color: Window }

Mențiune. Sistemul de valori de culori din CSS2 au fost înlocuite în favoarea proprietății CSS3 UI ‘appearance’ . Dacă doriți să imitați aspectul unui element de interfață de utilizator sau control, folosiți proprietatea ‘appearance’ în loc să încercați să mimați o interfață de utilizator prin a combinație de sisteme de culori.

4.6. Mențiuni asupra folosirii culorilor

Deşi culorile pot adăuga cantităţi semnificative de informaţii pentru un document şi de a le face mai uşor de citit, vă rugăm să luați în considerare Liniile Directoare de accesibilitate a conținutului web W3C [WCAG20] atunci când includeți culoare în documentele dumneavoastră.

• 1.4.1 Folosirea culorii: Culoarea nu este folosită ca mijloc doar vizual de transmitere de informații, indicând o acțiune, determinând un răspuns, sau distingerea de elemente vizuale.

5. Compunerea simplă de alpha

Când sunt schițate, implementările trebuie să suporte alpha conform regulilor din Secțiunea 14.2 Compunearea simplă alpha de [SVG11]. (Dacă prorpietățile ‘color-interpolation’ sau ‘color-rendering’ menținute în acea secțiune nu sunt implementate sau nu se aplică, implementările trebuie să se comporte ca și cum ar avea valorile lor inițiale.)

6. Probă de foaie de stil pentru (X)HTML

Această anexă este informativă, nu normativă. Această foaie de stil ar putea fi folosită într-o implementare, ca parte a stilului implicit de HTML4, XHTML1, XHTML1.1, XHTML de bază, şi alte documente din familie XHTML.

html { 
	color: black;
	background: white;
}


/* traditional desktop user agent colors for hyperlinks */
:link    { color: blue; }   
:visited { color: purple; }

/* default focus outline */
:focus {
	outline: 1px dotted;  /* or 1px dotted invert */
}

7. Profile

Fiecare specificatie care folosește Culori CSS3 trebuie să definească un subset al caracteristicilor de Culori CSS3 pe care îl acceptă de exclude, și descrie sensul local al tuturor componentelor din acel subset.

Exemple care nu sunt normative:

8. Suita de teste

O Suită de Teste pentru un Modul de Culori CSS a fost dezvoltată, deși teste suplimentare pot fi adăugate. Această suită de teste este destinată verificărilor operate de agenții de utilizatori pentru conformitatea lor cu specificațiile. Această suită de teste nu este exhaustivă și nu acoperă toate valorile numerice posibile de culoare. Aceste teste sunt disponibile la http://www.w3.org/Style/CSS/Test/CSS3/Color/current/.

9. Cererea pentru Implementări a unor caracteristici refuzate

O serie de caracteristici care au fost prezente în Recomandarea Candidat din 14 Mai 2003 nu mai sunt prezente în acest caiet de sarcini. Cu toate acestea, cererea de implementare pentru aceste caracteristici rămâne, și ele pot fi include într-o versiune viitoare al acestei specificații având în vedere un număr suficient de implementări și o suită de teste pentru a demonstra inretoperabilitatea. Aceste caracteristici sunt:

• Profilul de culori ICC: proprietatea ‘color-profile’
• Proprietatea ‘rendering-intent’
• Regula ‘@color-profile’
• Sistemul de culori‘flavor’

10. Mulțumiri

Mulțumiri lui Brad Pettit atât pentru scrierea profilelor de culoare, cât și pentru implementarea lor. Mulțumiri lui Steven Pemberton pentru ca a scris despre culorile HSL. Mulțumiri speciale pentru pareri lui Mark 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, subgrupului XSL FO din cadrul grupului de muncă XSL, și pentru restul membrilor comunității www-style. Și mulțumiri lui Chris Lilley pentru ca a fost expertul rezident pentru Culorile CSS.

11. Schimbări

Acest document este diferit decât cel anterior, din 28 Octombrie 2010, Documentul de Recomandarea Propusă: data, starea și stilizarea sunt actualizate pentru Recomandarea W3C, referințele sunt actualizate, și acestă anexă cu lista de schimbări nu conține schimbări de fond.

12. Referințe

12.1. Normative

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

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

Index

• ActiveBorder, 4.5.1.
• ActiveCaption, 4.5.1.
• aliceblue, 4.3.
• <alphavalue>, 3.2., 4.2.2., 4.2.5.
• antiquewhite, 4.3.
• appearance, 4.5.1.
• AppWorkspace, 4.5.1.
• aqua, 4.1., 4.3.
• aquamarine, 4.3.
• azure, 4.3.
• Background, 4.5.1.
• beige, 4.3.
• bisque, 4.3.
• black, 4.1., 4.3.
• blanchedalmond, 4.3.
• blue, 4.1., 4.3.
• blueviolet, 4.3.
• brown, 4.3.
• burlywood, 4.3.
• ButtonFace, 4.5.1.
• ButtonHighlight, 4.5.1.
• ButtonShadow, 4.5.1.
• ButtonText, 4.5.1.
• cadetblue, 4.3.
• CaptionText, 4.5.1.
• chartreuse, 4.3.
• chocolate, 4.3.
• color, 3.1.
• <color>, 3.1., 4.
• color-interpolation, 5.
• color-rendering, 5.
• compositing, 5.
• coral, 4.3.
• cornflowerblue, 4.3.
• cornsilk, 4.3.
• crimson, 4.3.
• currentColor, 4.4., 3.1., 3.1., 3.1.
• cyan, 4.3.
• darkblue, 4.3.
• darkcyan, 4.3.
• darkgoldenrod, 4.3.
• darkgray, 4.3.
• darkgreen, 4.3.
• darkgrey, 4.3.
• darkkhaki, 4.3.
• darkmagenta, 4.3.
• darkolivegreen, 4.3.
• darkorange, 4.3.
• darkorchid, 4.3.
• darkred, 4.3.
• darksalmon, 4.3.
• darkseagreen, 4.3.
• darkslateblue, 4.3.
• darkslategray, 4.3.
• darkslategrey, 4.3.
• darkturquoise, 4.3.
• darkviolet, 4.3.
• deeppink, 4.3.
• deepskyblue, 4.3.
• dimgray, 4.3.
• dimgrey, 4.3.
• dodgerblue, 4.3.
• firebrick, 4.3.
• floralwhite, 4.3.
• forestgreen, 4.3.
• fuchsia, 4.1., 4.3.
• gainsboro, 4.3.
• ghostwhite, 4.3.
• gold, 4.3.
• goldenrod, 4.3.
• gray, 4.1., 4.3.
• GrayText, 4.5.1.
• green, 4.1., 4.3.
• greenyellow, 4.3.
• grey, 4.3.
• Highlight, 4.5.1.
• HighlightText, 4.5.1.
• honeydew, 4.3.
• hotpink, 4.3.
• hsl(), 4.2.4.
• hsla(), 4.2.5.
• InactiveBorder, 4.5.1.
• InactiveCaption, 4.5.1.
• InactiveCaptionText, 4.5.1.
• indianred, 4.3.
• indigo, 4.3.
• InfoBackground, 4.5.1.
• InfoText, 4.5.1.
• ivory, 4.3.
• khaki, 4.3.
• lavender, 4.3.
• lavenderblush, 4.3.
• lawngreen, 4.3.
• lemonchiffon, 4.3.
• lightblue, 4.3.
• lightcoral, 4.3.
• lightcyan, 4.3.
• lightgoldenrodyellow, 4.3.
• lightgray, 4.3.
• lightgreen, 4.3.
• lightgrey, 4.3.
• lightpink, 4.3.
• lightsalmon, 4.3.
• lightseagreen, 4.3.
• lightskyblue, 4.3.
• lightslategray, 4.3.
• lightslategrey, 4.3.
• lightsteelblue, 4.3.
• lightyellow, 4.3.
• lime, 4.1., 4.3.
• limegreen, 4.3.
• linen, 4.3.
• magenta, 4.3.
• maroon, 4.1., 4.3.
• mediumaquamarine, 4.3.
• mediumblue, 4.3.
• mediumorchid, 4.3.
• mediumpurple, 4.3.
• mediumseagreen, 4.3.
• mediumslateblue, 4.3.
• mediumspringgreen, 4.3.
• mediumturquoise, 4.3.
• mediumvioletred, 4.3.
• Menu, 4.5.1.
• MenuText, 4.5.1.
• midnightblue, 4.3.
• mintcream, 4.3.
• mistyrose, 4.3.
• moccasin, 4.3.
• navajowhite, 4.3.
• navy, 4.1., 4.3.
• oldlace, 4.3.
• olive, 4.1., 4.3.
• olivedrab, 4.3.
• opacity, 3.2.
• orange, 4.3.
• orangered, 4.3.
• orchid, 4.3.
• palegoldenrod, 4.3.
• palegreen, 4.3.
• paleturquoise, 4.3.
• palevioletred, 4.3.
• papayawhip, 4.3.
• peachpuff, 4.3.
• peru, 4.3.
• pink, 4.3.
• plum, 4.3.
• powderblue, 4.3.
• purple, 4.1., 4.3.
• red, 4.1., 4.3.
• #rgb, 4.2.1.
• rgb(), 4.2.1.
• rgba(), 4.2.2.
• rosybrown, 4.3.
• royalblue, 4.3.
• #rrggbb, 4.2.1.
• saddlebrown, 4.3.
• salmon, 4.3.
• sandybrown, 4.3.
• Scrollbar, 4.5.1.
• seagreen, 4.3.
• seashell, 4.3.
• sienna, 4.3.
• silver, 4.1., 4.3.
• skyblue, 4.3.
• slateblue, 4.3.
• slategray, 4.3.
• slategrey, 4.3.
• snow, 4.3.
• springgreen, 4.3.
• sRGB, 4.2.1., 4.1.
• steelblue, 4.3.
• system colors, 4.5.1.
• tan, 4.3.
• teal, 4.1., 4.3.
• thistle, 4.3.
• ThreeDDarkShadow, 4.5.1.
• ThreeDFace, 4.5.1.
• ThreeDHighlight, 4.5.1.
• ThreeDLightShadow, 4.5.1.
• ThreeDShadow, 4.5.1.
• tomato, 4.3.
• transparent, 4.2.3., 3.1.
• turquoise, 4.3.
• violet, 4.3.
• wheat, 4.3.
• white, 4.1., 4.3.
• whitesmoke, 4.3.
• Window, 4.5.1.
• WindowFrame, 4.5.1.
• WindowText, 4.5.1.
• yellow, 4.1., 4.3.
• yellowgreen, 4.3.

Listă Proprietăți