Culori web - Web colors

Culorile web sunt culori utilizate în afișarea paginilor web pe World Wide Web și metodele de descriere și specificare a acelor culori. Culorile pot fi specificate ca un triplet RGB sau în format hexazecimal (un triplet hexagonal ) sau în conformitate cu numele lor comune în limba engleză, în unele cazuri. Un instrument de culoare sau alt software grafic este adesea folosit pentru a genera valori de culoare. În unele utilizări, codurile de culoare hexazecimale sunt specificate cu notație folosind un semn numeric principal (#). O culoare este specificată în funcție de intensitatea componentelor sale roșii, verzi și albastre, fiecare reprezentată de opt biți. Astfel, există 24 de biți utilizați pentru a specifica o culoare web în gama sRGB și 16.777.216 culori care pot fi astfel specificate.

Culorile din afara gamei sRGB pot fi specificate în foi de stil în cascadă 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 . Specificarea unei culori care nu sunt sRGB în acest fel necesită apelul funcției RGB (). Este imposibil cu sintaxa hexazecimală (și astfel imposibilă în documentele HTML moștenite care nu utilizează CSS).

Primele versiuni ale Mosaic și Netscape Navigator au folosit 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ă, punctul alb adaptiv și condițiile de vizualizare. Acestea au fost alese pentru a fi similare multor monitoare din lumea reală și condiții de vizionare, pentru a permite redarea să fie destul de aproape de valorile specificate chiar și fără gestionarea culorii . Agenții utilizator variază în fidelitatea cu care reprezintă culorile specificate. Agenții de utilizator mai avansați folosesc gestionarea culorilor pentru a oferi o fidelitate mai bună 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 șase cifre, trei octeți, utilizat în HTML , CSS , SVG și alte aplicații de calcul 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ă. Aceasta reprezintă cea mai mică (0) până la cea mai mare (255) intensitate a fiecăreia dintre componentele culorii. Astfel, culorile web specifică culorile în schema de culori 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șu)
• Octet 2: valoare verde (tip culoare verde)
• Octet 3: valoare albastră (tip culoare 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 hex este obținut prin concatenarea celor șase cifre hexazecimale împreună, 2468A0 în acest exemplu.

Dacă oricare dintre cele trei valori ale culorii este mai mică de 10 hex (16 zecimale), trebuie să fie reprezentată cu un zero principal, astfel încât tripletul să aibă întotdeauna exact șase cifre. De exemplu, tripletul zecimal 4, 8, 16 ar fi reprezentat de cifrele hexagonale 04, 08, 10, formând tripletul hexagonal 040810.

Numărul de culori care poate fi reprezentat de acest sistem este 16 ⁶ sau 256 ³ sau 2 ²⁴ = 16 777 216.

Stenogramă formă hexazecimală

Se utilizează o formă prescurtată de trei cifre (hexazecimale). Extinderea acestui formular la forma de șase cifre este la fel de simplă ca dublarea fiecărei cifre: 09C devine 0099CC așa cum este prezentat în următorul exemplu CSS :

.threedigit { color: #09C;    }
.sixdigit   { color: #0099CC; } /* same color as above */

Această formă de prescurtare reduce paleta la 4.096 de culori, echivalentul culorii de 12 biți spre deosebire de culoarea de 24 de biți utilizând forma completă din șase cifre (16.777.216 culori). Această limitare este suficientă pentru multe documente bazate pe text.

Conversia RGB în hexadecimal

Valorile RGB sunt de obicei date î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) dă prima cifră hexazecimală (între 0 și F, unde literele de la A la F reprezintă numerele de la 10 la 15. Vezi hexadecimal pentru mai multe detalii). Restul dă a doua cifră hexazecimală. De exemplu, valoarea RGB 201 se împarte în 12 grupuri de 16, astfel prima cifră este C. Un rest de nouă 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 . Sunt disponibile, de asemenea, instrumente bazate pe web special pentru conversia valorilor culorilor.

Numele culorilor HTML

Specificațiile recente W3C ale denumirilor de culori disting între culorile de bază și culorile extinse . În HTML și XHTML, culorile pot fi folosite pentru text, culoare de fundal, margini ale cadrelor, tabele și celule de tabel individuale.

Culori de bază

Culorile de bază sunt 16 culori definite în specificația HTML 4.01, ratificată în 1999, după cum urmează (denumirile sunt definite în acest context pentru a fi insensibile la majuscule și minuscule):

Aceste 16 au fost etichetate ca sRGB și incluse în specificația HTML 3.0, care a menționat că erau „cele 16 culori standard acceptate cu paleta Windows VGA ”.

Culori extinse

Versiunea SVG a numelor de culori X11

Culori numite SVG1.1 cu coduri sRGB hex / dec și HSL, la rezoluție UHD (4K)

Culorile extinse sunt rezultatul îmbinării specificațiilor din HTML 4.01, CSS 2.0, SVG 1.0 și CSS3 User Interfaces (CSS3 UI).

Mai multe 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 sunt 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 Full . Nu fac parte din SVG Tiny .

Lista culorilor livrate împreună cu produsul X11 variază între implementări și ciocniri cu anumite nume HTML, cum ar fi verde. Culorile X11 sunt definite ca RGB simple (deci, fără un spațiu de culoare special), mai degrabă decât sRGB . Aceasta înseamnă că lista culorilor găsite în X11 (de exemplu, în /usr/lib/X11/rgb.txt) nu ar trebui folosită direct pentru a alege culorile pentru web.

Lista „culorilor X11” web din specificația CSS3, împreună cu echivalentele lor hexazecimale și zecimale, este prezentată mai jos. Comparați listele alfabetice din standardele W3C. Aceasta include sinonimele comune: aqua (nume standard HTML4 / CSS 1.0) și cyan (nume comun sRGB), magenta (nume comun sRGB) și fuchsia (nume standard HTML4 / CSS 1.0), gri (nume standard HTML4 / CSS 1.0) și gri.

Culori CSS

Specificația Cascading Style Sheets definește același număr de culori denumite ca și specificația HTML 4, și anume culorile de 16 html și 124 de culori din lista de culori Netscape X11 pentru un total de 140 de nume care au fost recunoscute de Internet Explorer (IE) 3.0 și Netscape Navigator 3.0. Blooberry.com notează că Opera 2.1 și Safari 1 includeau, de asemenea, 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.

În CSS 2.1, culoarea „portocaliu” (una dintre cele 140) a fost adăugată la secțiune cu cele 16 culori HTML4 ca a 17-a culoare. Specificația CSS3.0 nu a inclus portocaliu în secțiunea „Cuvinte cheie color HTML4”, care a fost redenumită „Cuvinte cheie color de bază”. Î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ă. Proiectul de lucru pentru modulul de culoare nivel 4 combină secțiunile de bază și extinse împreună într-o secțiune simplă „Culori numite”.

CSS 2, SVG și CSS 2.1 permit autorilor web să utilizeze culorile sistemului , care sunt nume de culori ale căror valori sunt preluate din sistemul de operare , alegând culoarea textului evidențiat a sistemului de operare sau culoarea de fundal pentru controalele de tip tooltip. Acest lucru permite autorilor web să își stilizeze conținutul în conformitate cu sistemul de operare al agentului utilizator. CSS3 Modulul de culoare a depreciat utilizarea culorilor sistemului în favoarea proprietății Aspect CSS3 UI sistemului care a fost ulterior a scăzut de la CSS3.

Specificația CSS3 introduce, de asemenea , valorile spațiului de culoare HSL în foile de stil:

 /* RGB model */
 p { color: #F00 } /* #rgb */
 p { color: #FF0000 } /* #rrggbb */
 p { color: rgb(255, 0, 0) } /* integer range 0 - 255 */
 p { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

 /* RGB with alpha channel, added to CSS3 */
 p { color: rgba(255, 0, 0, 0.5) } /* 0.5 opacity, semi-transparent */

 /* HSL model, added to CSS3 */
 p { color: hsl(0, 100%, 50%) } /* red */
 p { color: hsl(120, 100%, 50%) } /* green */
 p { color: hsl(120, 100%, 25%) } /* dark green */
 p { color: hsl(120, 100%, 75%) } /* light green */
 p { color: hsl(120, 50%, 50%) } /* pastel green */

 /* HSL model with alpha channel */
 p { color: hsla(120, 100%, 50%, 1) } /* green */
 p { color: hsla(120, 100%, 50%, 0.5) } /* semi-transparent green */
 p { color: hsla(120, 100%, 50%, 0.1) } /* very transparent green */

CSS Culoare 4

La 21 iunie 2014, CSS WG a adăugat culoarea RebeccaPurple la modulul Proiectul redactorului culorilor de nivelul 4, pentru a comemora fiica lui Eric Meyer, Rebecca, care a murit la 7 iunie 2014, a șasea aniversare.

CSS suportă și culoarea specială transparent, care reprezintă o valoare alfa de zero; în mod implicit, transparenteste redat ca un negru nominal invizibil: rgba(0, 0, 0, 0).

CSS Culoare 5

Culori sigure pe web

La mijlocul anilor 1990, multe afișaje erau capabile să afișeze doar 256 de culori. Acestea pot fi dictate de hardware sau modificabile de un „tabel de culori”. Când se găsește o culoare (de exemplu, într-o imagine) care nu este disponibilă, a trebuit să se utilizeze o culoare diferită. Acest lucru se poate face fie folosind culoarea cea mai apropiată, fie folosind dithering .

Au existat diferite încercări de a realiza o paletă de culori „standard”. A fost nevoie de un set de culori care să poată fi afișat fără a trece pe ecranele cu 256 de culori; numărul 216 a fost ales parțial pentru că sistemele de operare ale computerelor rezervau în mod obișnuit șaisprezece până la douăzeci de culori pentru propria lor utilizare; 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 culorilor este prezentată ca și când ar avea 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 orice selecție de culori pe care o aleg, dithering restul. Aceste culori au fost alese special pentru că se potriveau cu paletele selectate de diferite aplicații de browser. Nu existau palete foarte diferite în diferite browsere.

Culorile „web-safe” au avut un defect în faptul că, pe sisteme precum X11 în care paleta este partajată între aplicații, cuburile de culoare mai mici (5 × 5 × 5 sau 4 × 4 × 4) au fost alocate de browsere - „web- culori „sigure” s-ar scurge pe astfel de sisteme. Au fost obținute 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 unei duble cuantizări.

Prin anii 2000, utilizarea afișajelor cu 256 de culori în computerele personale a scăzut brusc în favoarea afișajelor pe 24 de biți ( TrueColor ), iar utilizarea culorilor „web-safe” a căzut în uz practic.

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 (din cele 256 posibile valorile disponibile pentru fiecare componentă în culori complete pe 24 de biți).

Următorul tabel prezintă toate culorile „web-safe”. O deficiență a paletei web-safe este gama sa mică de culori deschise pentru fundalurile paginilor web, în ​​timp ce intensitățile de la capătul inferior al gamei, cum ar fi cele două cele mai întunecate, sunt similare una cu cealaltă, făcându-le greu de distins. Valorile flancate de „*” (asterisc) fac parte din „paleta cu adevărat sigură”; consultați culorile web cele mai sigure , mai jos.

Masă de culoare

Fiecare cod de culoare listat este o prescurtare pentru valoarea RGB. De exemplu, codul 609 este echivalent cu codul RGB 102-0-153 sau codul HEX # 660099 .

Cele mai sigure culori web

Proiectanții au fost încurajați să respecte 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 atunci 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 sunt afișate în mod fiabil, fără o remapare inconsecventă pe ecranele de 16 biți ale computerului . Au numit aceste 22 de culori „paleta cu adevărat sigură”; constă în mare parte din nuanțe de verde, galben și albastru.

Accesibilitate

Selectarea culorii

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

Fie nu trebuie specificate culori (pentru a invoca culorile implicite ale browserului), fie ar trebui specificate atât fundalul, cât și toate culorile din prim plan (cum ar fi culorile textului simplu, linkurile nevizitate, linkurile trecute, linkurile active și linkurile vizitate) pentru a evita efect negru pe negru sau alb pe alb .

Contrast de culoare

Web Content Accessibility Guidelines recomanda un raport de contrast de cel puțin 4,5: 1 între luminanța relativă a textului și culoarea sa de fond sau cel puțin 3: 1 pentru text mare. Accesibilitatea îmbunătățită necesită raporturi de contrast mai mari de 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 , cititorii dislexici sunt mai bine deserviți de rapoarte de contrast sub maxim. Recomandările la care se referă la 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 celelalte perechi de culori ale lor, 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) pe galben (0xFFFF00) are un raport de contrast de 11,4: 1. Observați că culorile denumite în raport folosesc valori de culoare diferite de culorile web cu același nume.

Vezi si

Referințe

linkuri externe

• Valoarea culorii CSS pe MDN Web Docs
• Specificația culorii CSS2.1
• Listarea culorilor web sigure
• Culori web la Curlie