Selector de culori

Cum folosești selectorul de culori

1. Apasă pe eșantionul de sub Alege o culoare ca să deschizi selectorul de culori al browserului, apoi alege o culoare. Poți și să scrii sau să lipești o valoare în câmpul Codul culorii: un cod HEX precum #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) sau un nume CSS precum tomato.
2. Previzualizarea mare se actualizează imediat, cu codul HEX scris în negru sau alb, în funcție de ce se citește mai bine pe acel fundal.
3. La Coduri de culoare, copiază formatul de care ai nevoie cu butonul Copiază de lângă el: HEX, RGB, HSL, HSV sau CMYK.
4. Apasă Culoare aleatorie când vrei inspirație sau Alege de pe ecran (în browserele care o acceptă, precum Chrome și Edge) ca să preiei orice pixel de pe ecran, inclusiv din alte ferestre.

Totul se întâmplă în browserul tău: nicio culoare și nicio imagine nu sunt trimise nicăieri.

Ce înseamnă fiecare cod de culoare

• HEX este notația hexazecimală cu șase cifre folosită în HTML și CSS. Fiecare pereche de cifre este un canal (roșu, verde, albastru) de la 00 la FF, deci #1E90FF înseamnă roșu 30, verde 144, albastru 255.
• RGB dă aceleași trei canale ca numere zecimale de la 0 la 255. Este ce așteaptă majoritatea programelor de design și a bibliotecilor de programare.
• HSL descrie o culoare prin nuanță (un unghi de la 0° la 360° pe cercul cromatic), saturație și luminozitate. Este util ca să deschizi sau să închizi o culoare schimbând un singur număr.
• HSV (numit și HSB) folosește nuanța, saturația și valoarea (strălucirea). Este modelul din spatele pătratelor de culoare din Photoshop, Figma și multe alte editoare.
• CMYK exprimă culoarea ca procente de cerneală cyan, magenta, galben și negru.

Despre valorile CMYK

Codurile CMYK sunt o conversie simplă: K = 1 − max(R, G, B), apoi C = (1 − R − K) / (1 − K), la fel pentru M și Y. Este formula standard din manuale, dar nu folosește un profil ICC. Tiparul real depinde de mașină, de hârtie și de cerneluri, deci o tipografie îți va converti culorile cu propriul profil, iar rezultatul poate diferi. Folosește aceste numere ca punct de plecare, nu ca dovadă pentru tipar.

Cum citești rapoartele de contrast

Sub codul HEX, previzualizarea arată Contrast pe alb și Contrast pe negru, calculate cu formula luminanței relative din WCAG 2. Pentru textul normal de la nivelul AA este nevoie de un raport de cel puțin 4,5:1, iar pentru textul mare și elementele de interfață de 3:1. Dacă culoarea ta atinge doar 3:1 pe alb, păstrează-o pentru titluri mari sau pictograme și folosește o nuanță mai închisă pentru text.

Sfaturi

• Poți lipi coduri hex fără #: merge și 1e90ff, la fel ca formele scurte precum f60.
• Valorile cu transparență, precum rgb(0 0 0 / 50%), sunt acceptate; selectorul afișează culoarea opacă.
• Fereastra de culori a browserului diferă de la un sistem la altul. Dacă ai nevoie de o valoare precisă, scrierea ei în câmpul Codul culorii este întotdeauna exactă.