Culori web

Acest articol sau secțiune despre subiectul computerului a fost parțial tradus din limba engleză . Puteți contribui terminând traducerea sau folosind alte surse. Nu utilizați programe de traducere automată. Folosiți {{ Tradus de }} când ați terminat. Dacă găsiți text ascuns pe pagina de editare , verificați dacă este actualizat folosind linkurile „în alte limbi” din partea de jos a coloanei din stânga. Urmați sfaturile de proiectare de referință .

Culorile Web sunt culori utilizate în afișarea paginilor web de pe World Wide Web și în metodele pentru descrierea și specificând aceste culori. Culorile pot fi specificate ca un RGB triplet sau în hex format (un triplet hex) sau , în unele cazuri , după numele lor comune în engleză. Un instrument de alegere a culorii sau a altor software - ul grafic este adesea folosit pentru a genera valori de culoare. În unele utilizări, codurile de culoare hexazecimale sunt specificate în notație, utilizând un semn numeric principal (#). ^{[1] [2]} O anumită culoare este specificată de intensitatea componentelor sale roșii, verzi și albastre, fiecare reprezentată de opt biți . Prin urmare, există 24 de biți utilizați pentru a specifica o culoare web în gama sRGB și 16.777.216 culori care pot fi specificate ca atare.

Culorile din afara gamei sRGB pot fi specificate în foi de stil în cascadă (CSS), făcând una sau mai multe dintre componentele roșu, verde și albastru negative sau mai mari de 100%, astfel încât spațiul de culoare este teoretic o extrapolare nelimitată a sRGB similară cu scRGB. ^[3] Specificarea unei culori non-sRGB în acest mod necesită apelarea funcției RGB (); este imposibil cu sintaxa hexagonală (și, prin urmare, imposibilă în documentele HTML vechi care nu utilizează CSS).

Primele versiuni ale Mosaic și Netscape Navigator foloseau numele de culori X11 ca bază pentru listele lor de culori, deoarece ambele au început ca aplicații X Window System . Culorile web au o definiție colorimetrică neambiguă, sRGB , care leagă cromaticitățile unui anumit set de fosfor , o curbă de transfer dată, un punct alb adaptiv și condițiile de vizualizare. ^[4] Acestea au fost alese pentru a fi similare multor monitoare și condiții de afișare din lumea reală, pentru a permite redarea să fie suficient de apropiată de valorile specificate chiar și fără gestionarea culorii . Interpreții variază în fidelitatea cu care reprezintă culorile specificate. Agenții de utilizator mai avansați folosesc gestionarea culorilor pentru a oferi o mai bună fidelitate a culorii; acest lucru este deosebit de important pentru aplicațiile web-to-print.

Triplet hexagonal

Un triplet hexagonal este un număr hexazecimal format din trei cifre, trei octeți utilizat în HTML , CSS , SVG și alte aplicații de procesare pentru a reprezenta culorile. Octetii reprezintă componentele roșii, verzi și albastre ale culorii. Un octet reprezintă un număr în intervalul 00 până la FF (în notație hexazecimală) sau de la 0 la 255 în notație zecimală și reprezintă intensitatea fiecăreia dintre componentele culorii. Prin urmare, culorile web specifică culorile în schema de culori True Color (RGB pe 24 de biți). Tripletul hex este format prin concatenarea a trei octeți în notație hexazecimală, în următoarea ordine:

Octet 1: valoare roșie (tip de culoare roșie)

Octet 2: valoare verde (tip de culoare verde)

Octet 3: valoare albastră (tip albastru)

De exemplu, luați în considerare culoarea în care valorile roșu / verde / albastru sunt numere zecimale: roșu = 36, verde = 104, albastru = 160 (o culoare gri-albastru). Numerele zecimale 36, 104 și 160 sunt echivalente cu numerele hexazecimale 24, 68 și respectiv A0. Tripletul hexagonal este obținut prin concatenarea celor șase cifre hexagonale împreună, 2468A0 în acest exemplu.

Dacă una dintre cele trei valori de culoare este mai mică de 10 hex (16 zecimale), aceasta trebuie să fie reprezentată cu un zero de primire, astfel încât tripletul să conțină întotdeauna exact șase cifre. De exemplu, tripletul zecimal 4, 8, 16 este reprezentat de cifrele hexazecimale 04, 08, 10, formând tripletul hexagonal 040810.

Formă hexazecimală abreviată

Se folosește o formă scurtă de trei cifre (hexazecimală). ^[5] Extinderea acestui formular în formă de șase cifre este foarte simplă, deoarece trebuie doar să dublați fiecare cifră: 09C devine 0099CC așa cum este prezentat în următorul exemplu CSS :

 . threedigit { color : # 09C ; }
. sixdigit { color : # 0099CC ; } / * aceeași culoare ca mai sus * /

Această formă scurtă reduce paleta la 4.096 culori, echivalentul culorii pe 12 biți în loc de culoarea pe 24 biți utilizând formularul complet din șase cifre (16.777.216 culori), această limitare este suficientă pentru multe documente bazate pe text.

Convertiți RGB în hexadecimal

Valorile RGB sunt în general indicate în intervalul 0–255; dacă sunt în intervalul 0-1, valorile sunt înmulțite cu 255 înainte de conversie. Acest număr împărțit la șaisprezece (divizare întreagă; ignorând orice rest) ne dă prima cifră hexazecimală (între 0 și F, unde literele de la A la F reprezintă numerele de la 10 la 15. Vezi hex pentru mai multe detalii). Restul ne dă a doua cifră hexazecimală. De exemplu, valoarea RGB 201 se împarte în 12 grupuri de 16, deci prima cifră este C. Un rest de nouă ne dă numărul hexazecimal C9. Acest proces se repetă pentru fiecare dintre cele trei valori de culoare.

Conversia între bazele numerice este o caracteristică comună a calculatoarelor, incluzând atât modelele portabile, cât și calculatoarele software incluse în majoritatea sistemelor de operare moderne. Există, de asemenea, instrumente web specifice pentru conversia valorilor culorilor.

Numele culorilor HTML

Specificația HTML 4.01, ratificată în 1999, definește 16 culori numite ^[6] , după cum urmează (în acest context de denumire nu este sensibil la majuscule și minuscule): Aceste 16 au fost etichetate ca sRGB și incluse în specificația HTML 3.0, în care o notă afirmă că acestea erau „cele 16 culori standard acceptate cu paleta Windows VGA ”. ^[7]

Numele culorilor X11

Versiunea SVG a numelor de culori X11

Diferite culori sunt definite de browserele web . Un anumit browser poate să nu recunoască toate aceste culori, dar începând cu 2005 toate browserele grafice moderne de uz general acceptă lista completă de culori. Multe dintre aceste culori provin din lista numelor de culori X11 distribuite cu sistemul X Window . Aceste culori au fost standardizate de SVG 1.0 și sunt acceptate de agenții de utilizator SVG complet . Nu fac parte din SVG Tiny .

Lista culorilor furnizate cu produsul X11 variază între implementări și conflicte cu unele dintre numele HTML, cum ar fi verde. Culorile X11 sunt definite ca RGB simple (deci, fără un anumit spațiu de culoare), mai degrabă decât sRGB . Aceasta înseamnă că lista culorilor găsite în X11 (de exemplu, în /usr/lib/X11/rgb.txt) nu trebuie folosită direct pentru a alege culorile pentru web ^[8] .

Mai jos este lista „culorilor X11” web din specificația CSS3, împreună cu echivalentele lor hexazecimale și zecimale. Comparați listele alfabetice din standardele W3C. Include sinonime comune: aqua (nume standard HTML4 / CSS 1.0), cyan (nume comun sRGB), magenta (nume comun sRGB), fuchsia (nume standard HTML4 / CSS 1.0), gri (nume standard HTML4 / CSS 1.0) și gri . ^{[9] [10]}

Culori sigure pentru web

La mijlocul anilor 1990, multe afișaje erau capabile să afișeze doar 256 de culori ^[11] . Aceste culori pot fi dictate de hardware sau pot fi schimbate dintr-un „tabel de culori”. Când se găsește o culoare (de exemplu, într-o imagine) care nu este disponibilă, trebuie folosită una diferită. Acest lucru se poate face folosind cea mai apropiată culoare sau folosind tehnica de dithering .

Au existat mai multe încercări de a veni cu o paletă de culori „standard”. A fost necesară o serie de culori care să poată fi afișate fără a se scurge pe un ecran cu 256 de culori; numărul 216 a fost ales parțial, deoarece sistemele de operare ale computerelor au rezervat în mod obișnuit șaisprezece până la douăzeci de culori pentru uz personal; a fost, de asemenea, selectat, deoarece permite exact șase nuanțe egale de roșu, verde și albastru (6 × 6 × 6 = 216), fiecare de la 00 la FF (inclusiv ambele limite).

Lista de culori este prezentată ca având proprietăți speciale care le fac imune la dithering, dar pe afișajele cu 256 de culori aplicațiile pot seta de fapt o paletă de alegerea culorii pe care o aleg, ocolind restul. Aceste culori au fost special alese deoarece se potriveau cu paletele selectate de diferite aplicații de browser. În acel moment, nu existau palete foarte diferite în diferite browsere.

Culorile „web safe” au avut un defect în acest sens, pe sisteme precum X11 în care paleta este partajată între aplicații, cele mai mici cuburi de culoare (5 × 5 × 5 sau 4 × 4 × 4) au fost alocate de browsere: „culori sigure pentru web” pe astfel de sisteme ar declanșa scuturare. S-au obținut rezultate diferite oferind o imagine cu o gamă mai largă de culori și permițând browserului să cuantifice spațiul de culoare dacă este necesar, mai degrabă decât să sufere pierderea calității cuantificării duble.

Din 2011, computerele personale ^[12] au în mod obișnuit culoare pe 24 de biți ( TrueColor ), iar utilizarea „culorilor web-safe” a căzut în desuetudine.

Culorile „web-safe” nu au toate nume standard, dar fiecare poate fi specificată de un triplet RGB : fiecare componentă (roșu, verde și albastru) ia una dintre cele șase valori din tabelul următor (dintre cele 256 posibile valorile disponibile pentru fiecare componentă de culoare pe 24 de biți).

Tabelul de mai jos prezintă toate culorile „web safe”. Un dezavantaj al paletei web-safe este gama sa mică de culori deschise pentru fundalurile paginilor web, în ​​timp ce intensitățile din capătul inferior al gamei, cum ar fi cele două mai întunecate, sunt similare una cu cealaltă, ceea ce le face dificil de distins.

Diagramă de culori

Fiecare cod de culoare listat este o comandă rapidă pentru valoarea RGB; de exemplu, codul 609 este echivalent cu codul RGB 102-0-153 sau codul HEX # 660099

Designerii au fost încurajați să rămână la aceste 216 culori „sigure pentru web” pe site-urile lor web, deoarece au existat o mulțime de afișaje color pe 8 biți când a fost dezvoltată paleta de 216 culori. David Lehn și Hadley Stern au descoperit că doar 22 din cele 216 de culori din paleta web-safe se afișează în mod fiabil, fără o remapare inconsecventă pe ecranele de 16 biți ale computerului. Ei au numit aceste 22 de culori „paleta cu adevărat sigură”; constă în principal din nuanțe de verde, galben și albastru, așa cum se poate vedea în tabelul de mai jos ^[13] .

Culori CSS

Specificația Cascading Style Sheets definește același număr de culori denumite ca și specificația HTML 4, adică culorile de 16 html și 124 de culori din lista de culori Netscape X11 pentru un total de 140 de nume recunoscute de Internet Explorer (IE) 3.0 și Netscape Navigator 3.0 . ^[15] Blooberry.com notează că Opera 2.1 și Safari 1 includeau și lista extinsă a Netscape cu 140 de nume de culori, dar mai târziu au descoperit 14 nume care nu erau incluse cu Opera 3.5 pe Windows 98. ^[16]

În CSS 2.1, culoarea „portocaliu” (portocaliu, una din 140) a fost adăugată la secțiune cu cele 16 culori HTML4 ca cea de-a șaptesprezecea culoare. ^[17] Specificația CSS3.0 nu a inclus portocaliu în secțiunea „Cuvinte cheie color HTML4”, care a fost redenumită „Cuvinte cheie color de bază” ^[18] . În aceeași referință, secțiunea „Cuvinte cheie color SVG” a fost redenumită „Cuvinte cheie color extinse”, după ce a început ca „Cuvinte cheie color X11” într-o schiță de lucru anterioară ^[19] . Schița de lucru pentru modulul de culoare CSS4 combină secțiunile de bază și extinse împreună într-o secțiune simplă „Culori numite” ^[20] .

CSS 2, SVG și CSS 2.1 permit autorilor web să folosească culorile sistemului , care sunt nume de culori ale căror valori sunt preluate din sistemul de operare , selectând culoarea textului evidențiat a sistemului de operare sau culoarea de fundal pentru controalele culorilor. Acest lucru permite autorilor web să își modeleze conținutul în conformitate cu sistemul de operare agent utilizator. ^[21] Modulul de culoare CSS3 a depreciat utilizarea culorilor sistemului în favoarea proprietății Aspect sistem a interfeței de utilizator CSS3, ^{[22] [23]} care a fost ulterior abandonată din CSS3. ^[24]

Dezvoltarea specificației CSS3 introduce și valori ale spațiului de culoare HSL în foile de stil: ^[25]

 / * Model RGB * /
 p { color : # F00 } / * #rgb * /
 p { color : # FF0000 } / * #rrggbb * /
 p { culoare : rgb ( 255 , 0 , 0 ) } / * interval întreg 0 - 255 * /
 p { culoare : rgb ( 100 % , 0 % , 0 % ) } / * interval float 0,0% - 100,0% * /

 / * RGB cu canal alfa, adăugat la CSS3 * /
 p { culoare : rgba ( 255 , 0 , 0 , 0,5 ) } / * 0,5 opacitate, semitransparentă * /

 / * Model HSL, adăugat la CSS3 * /
 p { culoare : hsl ( 0 , 100 % , 50 % ) } / * roșu * /
 p { culoare : hsl ( 120 , 100 % , 50 % ) } / * verde * /
 p { culoare : hsl ( 120 , 100 % , 25 % ) } / * verde închis * /
 p { culoare : hsl ( 120 , 100 % , 75 % ) } / * verde deschis * /
 p { culoare : hsl ( 120 , 50 % , 50 % ) } / * verde pastel * /

 / * Model HSL cu canal alfa * /
 p { culoare : hsla ( 120 , 100 % , 50 % , 1 ) } / * verde * /
 p { culoare : hsla ( 120 , 100 % , 50 % , 0,5 ) } / * verde semi-transparent * /
 p { culoare : hsla ( 120 , 100 % , 50 % , 0,1 ) } / * verde foarte transparent * /

Pe 21 iunie 2014, CSS WG a adăugat culoarea RebeccaPurple la proiectul editorului modulului CSS4 Colors, pentru a comemora fiica lui Eric Meyer, Rebecca, care a decedat pe 7 iunie 2014, de ziua a șasea. ^[26]

CSS acceptă și culoarea transparent specială, care reprezintă o valoare alfa de zero; În mod implicit, transparent este redat ca un negru nominal invizibil: rgba(0, 0, 0, 0) . ^[27]

Schimbarea numelui culorilor

CSS3 vă permite să redenumiți culorile după cum doriți și să le amintiți mai târziu ^[28] :

 $ color- dunăre : # 668DD1 ;

/ * RECALL * /
$ color-alfa : $ color-dunăre ;

Accesibilitate

Selectarea culorii

Unele browsere și dispozitive nu acceptă culori. Pentru aceste afișaje sau pentru utilizatorii orbi și orbi, conținutul web bazat pe culori poate fi inutilizabil sau dificil de utilizat.

Nu trebuie să specificați culori (pentru a reaminti culorile implicite ale browserului) sau să specificați atât culorile de fundal, cât și culorile din prim-plan (cum ar fi culorile textului simplu, a linkurilor nevizitate, a linkurilor de trecere, a linkurilor active și a linkurilor vizitate) pentru a evita negrul pe efect alb sau alb pe alb. ^[29]

Culorile nu pot fi traduse în HTML , CSS , SVG și Canvas , ele trebuie păstrate în limba engleză. De exemplu, nu puteți scrie color: rosso dar trebuie să scrieți color: red

Contrast de culoare

Ghidul de accesibilitate a conținutului web recomandă un raport de contrast de cel puțin 4,5: 1 între luminanța relativă a textului și culoarea de fundal ^[30] sau cel puțin 3: 1 pentru textul mare. Accesibilitatea îmbunătățită necesită raporturi de contrast peste 7: 1.

Cu toate acestea, abordarea problemelor de accesibilitate nu este doar o chestiune de creștere a raportului de contrast. După cum indică un raport către Inițiativa pentru accesibilitate web , ^[31] cititorii dislexici sunt mai bine cu raporturi de contrast mai mici decât cele maxime. Recomandările la care se face referire prin alb negru (0x0A0A0A) pe alb murdar (0xFFFFE5) și negru (0x000000) pe crem (0xFAFAC8) au raporturi de contrast de 11,7: 1 și respectiv 20,3: 1. Printre alte perechi de culori, maro (0x282800) pe verde închis (0xA0A000) are un raport de contrast de 3,24: 1, care este mai mic decât recomandarea WCAG , maro închis (0x1E1E00) pe verde deschis (0xB9B900) are un raport de contrast de 4,54: 1 și albastru (0x00007D) la galben (0xFFFF00 ) are un raport de contrast de 11,4: 1. Rețineți că culorile afișate în raport utilizează valori de culoare diferite de culorile web cu același nume.

Notă