HEX, RGB, HSL: Înțelegerea codurilor de culoare web

Editezi un site și vezi #FF5733 în CSS. Sau lucrezi cu un designer care îți trimite rgb(255, 87, 51). Sau un instrument de design afișează o culoare ca hsl(11, 100%, 60%). Toate acestea descriu exact aceeași culoare — un roșu-portocaliu viu — dar în trei formate diferite.

Dacă ai fost vreodată confuz de codurile de culoare web, acest ghid te va lămuri în cinci minute.

Cum funcționează culorile digitale

Fiecare culoare de pe ecranul tău este creată prin amestecarea a trei culori primare de lumină: Roșu, Verde și Albastru. Acesta este modelul de culoare RGB. Variind intensitatea fiecărui canal de la zero (oprit) la maxim (luminozitate completă), poți crea oricare dintre cele aproximativ 16,7 milioane de culori pe care le poate afișa un ecran standard.

• Roșu 255, Verde 0, Albastru 0 = roșu pur
• Roșu 0, Verde 255, Albastru 0 = verde pur
• Roșu 0, Verde 0, Albastru 255 = albastru pur
• Roșu 255, Verde 255, Albastru 255 = alb (toate canalele la maxim)
• Roșu 0, Verde 0, Albastru 0 = negru (toate canalele oprite)
• Roșu 255, Verde 255, Albastru 0 = galben (roșu + verde)

Fiecare format de culoare folosit pe web este pur și simplu o modalitate diferită de a exprima aceste valori ale canalelor.

Culori HEX

Cum arată

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

Cum funcționează

Un cod de culoare HEX este un șir de șase caractere precedat de simbolul diez. Cele șase caractere sunt împărțite în trei perechi, fiecare reprezentând un canal de culoare în hexazecimal (baza 16):

Hexazecimalul folosește cifrele 0-9 și literele A-F, unde A=10, B=11, C=12, D=13, E=14, F=15. Deci FF în hexazecimal este egal cu 255 în zecimal (15 × 16 + 15 = 255).

Descompunând #FF5733:

• FF = Roșu la 255 (maxim)
• 57 = Verde la 87
• 33 = Albastru la 51

Aceasta produce un roșu-portocaliu viu.

Forma prescurtată

Când fiecare pereche are două caractere identice, poți folosi o formă prescurtată cu trei caractere:

• #FF0000 poate fi scris ca #F00
• #3366FF poate fi scris ca #36F
• #000000 poate fi scris ca #000

Culori RGB

Cum arată

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

Cum funcționează

Notația RGB precizează direct valorile canalelor roșu, verde și albastru ca numere zecimale de la 0 la 255. Este cel mai intuitiv format deoarece numerele corespund direct intensității fiecărui canal de lumină.

rgb(255, 87, 51) înseamnă:

• Roșu: 255 (maxim)
• Verde: 87 (aproximativ o treime)
• Albastru: 51 (aproximativ o cincime)

RGBA: Adăugarea transparenței

RGBA adaugă o a patra valoare pentru opacitate (alfa), de la 0 (complet transparent) la 1 (complet opac):

rgba(255, 87, 51, 0.5)   /* 50% transparent */
rgba(0, 0, 0, 0.8)        /* negru 80% opac */

Aceasta este utilă pentru suprapuneri, umbre și orice element de design care trebuie să arate conținutul din spate.

Culori HSL

Cum arată

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

Cum funcționează

HSL înseamnă Nuanță (Hue), Saturație (Saturation), Luminozitate (Lightness). În loc să gândești în termeni de amestecare a canalelor roșu/verde/albastru, HSL descrie culoarea așa cum o percep oamenii în mod natural.

Nuanța este culoarea în sine, exprimată ca grad pe roata de culori (0-360):

• 0° / 360° = Roșu
• 60° = Galben
• 120° = Verde
• 180° = Cyan
• 240° = Albastru
• 300° = Magenta

Saturația este cât de vivace este culoarea, de la 0% (gri) la 100% (saturație completă).

Luminozitatea este cât de deschisă sau închisă este culoarea, de la 0% (negru) la 100% (alb). 50% este luminozitatea „normală".

hsl(11, 100%, 60%) înseamnă:

• Nuanță: 11° (roșu ușor portocaliu)
• Saturație: 100% (complet vivace)
• Luminozitate: 60% (ușor mai deschis decât normal)

HSLA: Adăugarea transparenței

Ca și RGBA, HSLA adaugă un canal alfa:

hsla(11, 100%, 60%, 0.5)   /* 50% transparent */

Când să folosești ce format

Pentru dezvoltare web

HEX este standardul de facto. Majoritatea CSS-ului este scris cu coduri HEX deoarece sunt compacte și orice dezvoltator le recunoaște.

Pentru sisteme de design

HSL este ideal pentru crearea de palete de culori consistente. Pentru a crea variante mai deschise și mai închise ale unei culori de marcă, ajustezi pur și simplu valoarea luminozității:

• Primar: hsl(210, 80%, 50%)
• Variantă deschisă: hsl(210, 80%, 70%)
• Variantă închisă: hsl(210, 80%, 30%)

Nuanța și saturația rămân aceleași, garantând că variantele sunt aceeași „culoare" la luminozități diferite.

Pentru transparență

Folosește RGBA sau HSLA când ai nevoie de culori semi-transparente pentru suprapuneri, umbre sau efecte de sticlă.

Convertirea între formate

Vei avea adesea nevoie să convertești între formate. Un designer trimite valori HSL, dar codul tău folosește HEX. Un ghid de marcă specifică RGB, dar ai nevoie de HSL pentru crearea variantelor.

Matematica este directă dar obositoare de efectuat manual. Un instrument de conversie o rezolvă instantaneu.

Începe să lucrezi cu culori:

• Convertește coduri de culoare
• Instrument de conversie culori
• Generator de palete de culori

Toate instrumentele sunt gratuite și funcționează direct în browser.