Codurile de culoare hex explicate: cum funcționează #RRGGBB

Cum funcționează un cod de culoare hex

Orice culoare de pe ecran se obține amestecând lumină roșie, verde și albastră. Un cod hex scrie intensitatea fiecărei lumini cu două caractere după semnul #: întâi roșul, apoi verdele, apoi albastrul. Acesta este tiparul #RRGGBB.

Caracterele sunt hexazecimale, adică un mod de a număra cu 16 cifre: de la 0 la 9, apoi a (10), b (11), c (12), d (13), e (14) și f (15). O pereche acoperă 256 de valori, de la 00 (0) la ff (255), exact intervalul din rgb().

Ca să transformi o pereche într-un număr obișnuit, înmulțești prima cifră cu 16 și adaugi a doua. Mai jos este #1e90ff, culoarea CSS dodgerblue, în patru formate, apoi calculată pereche cu pereche.

Deci #1e90ff este rgb(30, 144, 255): puțin roșu, destul de mult verde și albastru la maxim, ceea ce dă un albastru-cer aprins. Trei perechi a câte 256 de valori dau 16.777.216 culori posibile.

Forma scurtă hex, cu 3 și 4 cifre

Când ambele cifre din fiecare pereche sunt identice, poți scrie fiecare pereche o singură dată. #ffcc00 devine #fc0, iar browserul dublează la loc fiecare cifră. #1e90ff nu are formă scurtă, pentru că 1e și 90 nu sunt perechi dublate.

Forma scurtă acoperă doar 4.096 din cele 16,7 milioane de culori. Varianta cu patru cifre adaugă opacitatea în același fel, deci #f008 înseamnă #ff000088.

Opacitate hex: cod hex cu 8 cifre și alfa

Un cod cu opt cifre adaugă o a patra pereche pentru alfa, adică opacitatea: #RRGGBBAA. 00 înseamnă complet transparent, iar ff complet opac. Toate browserele actuale îl suportă în CSS, la fel ca forma scurtă #RGBA cu patru cifre.

Ca să obții perechea, înmulțește opacitatea cu 255, rotunjește la un număr întreg și convertește-l în hex. 50% dă 127,5, care se rotunjește la 128, adică 80 în hex. Iată tabelul complet, aplicat pe #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Două capcane. Prima: 80 înseamnă 128 din 255, adică 50,2%, nu exact 50%. Alfa hex are doar 256 de trepte, deci majoritatea procentelor rotunde sunt doar aproximări apropiate. A doua: Android pune alfa primul. Într-o resursă de culoare Android, #801e90ff înseamnă același lucru ca #1e90ff80 în CSS.

Cum citești un cod hex din ochi

Poți ghici o culoare fără să convertești nimic. Uită-te la prima cifră din fiecare pereche, pentru că ea poartă aproape toată informația.

• Cea mai mare primă cifră arată lumina dominantă. #d2691e are d la roșu, 6 la verde și 1 la albastru, deci este un maro-portocaliu.
• Două canale mari se amestecă: roșul și verdele dau galben, verdele și albastrul dau cyan, roșul și albastrul dau magenta sau mov.
• Trei perechi egale dau un gri. #333333 este gri închis, #999999 este gri deschis. Perechile aproape egale, ca la #708090, dau o culoare stinsă, cenușie.
• Cifrele mari în general înseamnă o culoare deschisă, cele mici una închisă. Când toate trei perechile sunt c0 sau mai mari, culoarea este palidă. Când toate trei sunt 30 sau mai mici, este foarte închisă.
• Verdele pare mult mai luminos decât albastrul la același număr. #00ff00 are luminozitatea OKLCH 0,866, iar #0000ff doar 0,452.

De ce #808080 nu este gri mediu

#808080 se află exact la jumătate ca numere: 128 din 255 pe fiecare canal. Totuși, nu arată ca fiind la jumătatea drumului dintre negru și alb. Luminozitatea lui OKLCH este 0,600, deci se percepe ca aflat la 60% din drumul spre alb.

Valorile hex sunt deja codate cu curba sRGB, care urmează aproximativ ochiul, dar nu exact. #808080 emite circa 21,6% din lumina albului, iar modelele perceptuale pun mijlocul vizual mai jos: OKLCH la #636363, CIELAB la #777777.

Asta contează pentru text. Griul #808080 pe alb are 3,95:1 și pică WCAG AA pentru textul de bază. #767676 este cel mai deschis gri care trece de 4,5:1, iar #777777, cu o treaptă mai deschis, pică deja, cu 4,48:1.

Majuscule sau minuscule, cu sau fără #

Codurile hex nu fac diferența între majuscule și minuscule. #1E90FF, #1e90ff și #1E90ff sunt aceeași culoare în CSS, SVG și instrumentele de design. Alege un stil și păstrează-l peste tot, ca o căutare prin cod să găsească fiecare utilizare. În CSS se folosesc de obicei minusculele.

Semnul # face parte din sintaxa CSS, nu din culoare. Figma și multe instrumente de design arată codul fără el, iar limbajele de programare îl scriu adesea ca număr cu prefixul 0x, ca în Flutter, unde Color(0xFF1E90FF) începe cu perechea alfa.

Cum afli codul hex al unei culori de pe ecran

Folosește o pipetă: un instrument care citește culoarea de sub cursor și îi arată codul. Sunt gratuite și, de cele mai multe ori, deja instalate.

• Chrome și Edge: deschide DevTools cu F12, dă clic pe orice pătrățel de culoare din panoul Styles și folosește pictograma pipetei ca să preiei o culoare din pagină.
• PickShade: selectorul de culori de pe pagina principală are în Chrome și Edge un buton pipetă care preia culori de oriunde de pe ecran.
• Windows: instalează Microsoft PowerToys și apasă Win + Shift + C ca să deschizi Color Picker.
• macOS: deschide Digital Color Meter din Aplicații, Utilitare. Comută-l pe sRGB, apoi alege View, Display Values, as Hexadecimal.
• Figma, Photoshop și majoritatea aplicațiilor de design: apasă I pentru pipetă.
• Într-o fotografie sau o captură de ecran: deschide-o în selectorul de culori din imagini și dă clic pe orice pixel. Imaginea rămâne pe dispozitivul tău.

O valoare preluată poate diferi cu câteva unități de original, pentru că ecranele aplică profiluri de culoare, iar imaginile sunt comprimate. Când ai nevoie de valoarea exactă, copiaz-o din fișierul de design sau din CSS, nu dintr-o captură de ecran.

Întrebări și răspunsuri