HEX, RGB, HSL, CMYK și cum verifici contrastul textului

Un cod de culoare este aceeași culoare scrisă într-o altă notație. HEX, RGB și HSL descriu aceeași lumină de pe ecran, așa că se convertesc exact unele în altele, cu excepția rotunjirilor. CMYK descrie cerneala pe hârtie, deci conversia din valorile de ecran este doar o estimare. Raportul de contrast WCAG este un alt număr, care compară cât de luminoase sunt două culori și decide dacă textul se citește bine. Lipește o culoare în convertorul de culori ca să vezi toate formatele deodată.

Convertor de culoriAm nevoie de o culoare în alt formatÎncearcă gratuit

Dacă culoarea de care ai nevoie se află într-o fotografie, un logo sau o captură de ecran, citește-o mai întâi din pixel cu selectorul de culori din imagine, apoi lipește codul HEX aici. Cum alegi o culoare exactă dintr-o imagine explică pașii.

HEX și RGB sunt aceleași numere

Un cod HEX are trei perechi de cifre hexazecimale. #34D6A0 conține o valoare pentru roșu, una pentru verde și una pentru albastru. Fiecare pereche este un număr de la 00 la FF, adică de la 0 la 255 în zecimal. Deci 34 înseamnă 52, D6 înseamnă 214 și A0 înseamnă 160, iar forma RGB este rgb(52, 214, 160).

Scrierea numărului în hexazecimal schimbă doar felul în care arată. Forma scurtă #abc înseamnă #aabbcc, fiecare cifră fiind dublată. Un cod de opt cifre adaugă la final o pereche alfa, de la 00 pentru complet transparent până la FF pentru complet opac, deci #34D6A080 este aproximativ pe jumătate transparent. RGBA scrie aceeași transparență ca un număr de la 0 la 1.

CSS acceptă și nume de culori. rebeccapurple este #663399. Convertorul citește numele prin chiar browserul tău, deci orice nume pe care îl cunoaște browserul va funcționa.

HSL descrie o culoare așa cum o descriem noi

HSL înseamnă nuanță (hue), saturație și luminozitate (lightness). Nuanța este un unghi pe cercul cromatic: roșu este 0 grade, verde este 120, iar albastru este 240. Saturația arată cât de departe este culoarea de gri, iar luminozitatea arată cât de departe este de negru sau de alb.

Același #34D6A0 este hsl(160, 66%, 52%). Nuanța lui se află între verde și albastru, saturația este ridicată, iar luminozitatea este puțin peste jumătate. HSL este cea mai ușoară formă de editat manual, pentru că poți păstra nuanța și muta doar luminozitatea, ca să obții o nuanță mai deschisă sau mai închisă.

HSV seamănă cu HSL, dar folosește valoarea (value), adică luminozitatea canalului cel mai puternic, în locul luminozității. Unele selectoare de culori o folosesc, așa că s-ar putea să o întâlnești în alte instrumente. Convertorul o afișează lângă HSL, ca să poți compara cele două.

CMYK este pentru cerneală, deci este o estimare

Ecranele adună lumină: roșu, verde și albastru împreună fac alb. Imprimantele scot lumina cu cerneală: cyan, magenta, galben și negru pe hârtie albă. Cele două sisteme nu se pot potrivi exact, așa că o valoare CMYK este întotdeauna o traducere.

Convertorul folosește formula simplă. Negrul este K, adică unu minus cea mai mare dintre valorile roșu, verde și albastru, pe o scară de la 0 la 1. Cyan, magenta și galben se calculează apoi din ce rămâne după K. Formula ignoră cerneala, hârtia și profilul de culoare pe care le folosește tipografia. Rezultatul tipărit va fi deci diferit, iar culorile foarte luminoase pot ieși complet din ce pot reda cernelurile CMYK. Folosește valoarea CMYK ca punct de plecare în discuția cu tipografia și cere un bun de tipar înainte de un tiraj mare.

Contrastul ține de lumină, nu de nuanță

Raportul de contrast WCAG compară două culori după luminanța lor relativă. Luminanța se calculează din valorile roșu, verde și albastru după corecția gamma, iar verdele contează cel mai mult, pentru că ochiul uman îl percepe cel mai bine. Fiecare canal este convertit mai întâi din scala 0 la 255, iar luminanța este 0,2126 înmulțit cu roșu, plus 0,7152 înmulțit cu verde, plus 0,0722 înmulțit cu albastru.

Raportul este luminanța mai deschisă plus 0,05, împărțită la luminanța mai închisă plus 0,05. Negru pe alb dă 21 la 1, cel mai mare raport posibil. Două culori pot arăta destul de diferit ca nuanță și totuși au un raport mic dacă au aceeași luminozitate, iar acesta este cazul pe care verificarea există să-l prindă. Același contrast slab explică și de ce codurile QR nu se citesc.

Pragurile

WCAG 2.x stabilește două niveluri, iar raportul cerut depinde de dimensiunea textului.

• Nivelul AA: 4,5 la 1 pentru text normal și 3 la 1 pentru text mare.
• Nivelul AAA: 7 la 1 pentru text normal și 4,5 la 1 pentru text mare.

Textul mare înseamnă 24 de pixeli sau mai mult, sau 18,66 de pixeli și îngroșat. Orice e mai mic se consideră normal. Textul gri pe alb este o greșeală frecventă. Un gri mediu, cum ar fi #777777 pe alb, are aproximativ 4,48 la 1. Nu trece pragul AA pentru text normal, cu o diferență mică, dar trece AA pentru titluri mari.

Convertorul arată raportul rotunjit la două zecimale, dar fiecare verdict de trecere sau eșec folosește cifra exactă. O valoare care apare ca 4,50 poate deci să nu treacă, dacă este ușor sub prag. Verificarea măsoară un singur lucru. Nu acoperă greutatea fontului, spațierea între rânduri sau felul în care văd designul persoanele cu deficiențe de percepție a culorilor, așa că testează și pagina reală, la dimensiunile ei reale.

Nuanțe și umbre

Banda de sub convertor arată nouă trepte în jurul culorii: patru nuanțe mai deschise, amestecate cu alb, culoarea în sine și patru umbre, amestecate cu negru. Un clic pe una dintre ele copiază codul ei HEX. Asta ajută când ai nevoie de un set de culori înrudite, de exemplu un fundal deschis, o stare de hover și o culoare închisă pentru text, toate luate dintr-o singură valoare de brand. Verifică fiecare pereche aleasă cu secțiunea de contrast înainte s-o folosești.

Cum o faci cu fixmint

1. Lipește o culoare în caseta Color ca HEX, RGB, HSL sau un nume CSS, de exemplu rebeccapurple.
2. Citește rândurile HEX, RGB, HSL, HSV și CMYK. Apasă Copy lângă cel de care ai nevoie. CMYK este marcat ca aproximativ.
3. Scrie culoarea de fundal în Background sau folosește mostra ei, apoi citește raportul de sub On white, On black și On your background.
4. Verifică cele patru marcaje de sub fiecare raport: AA și AAA, fiecare pentru text normal și text mare.
5. Sub Tints and shades, atinge o mostră ca s-o copiezi.

Răspunsuri rapide

Este valoarea CMYK exactă?

Nu. Este o conversie aritmetică simplă, care ignoră imprimanta, hârtia și profilul de culoare. Tratează-o ca pe un punct de plecare și cere un bun de tipar.

Un raport de contrast suficient face un design accesibil?

Înseamnă cătonurile textului îndeplinesc un prag măsurabil. Accesibilitatea depinde și de dimensiune, spațiere, animații și de felul în care este construită pagina, așa că raportul este un ghid, nu o verificare completă.

Ce format să țin într-o foaie de stiluri?

Pe cel pe care îl citești și îl editezi cel mai ușor. HEX este compact și comun. HSL este mai ușor de ajustat manual, pentru că schimbi luminozitatea fără să schimbi nuanța.