Convertor culori HEX, RGB, HSL, CMYK

Pe această pagină

Cum se calculează
Ce formate acceptă câmpul de text
HSL sau HSV: care e diferența
CMYK: de ce valoarea e doar orientativă
Contrastul pentru accesibilitate (WCAG)
Cum se construiesc paletele
Sfaturi practice
Întrebări frecvente
Calculatoare similare
Surse și actualizare

Cum se calculează

Toate formatele pornesc de la cele trei componente RGB (roșu, verde, albastru), fiecare între 0 și 255. Pentru calcule, ele se împart la 255 și devin R′, G′, B′ între 0 și 1.

HEX = R, G, B scrise în baza 16, câte două cifre: 227 → E3 max = cea mai mare dintre R′, G′, B′; min = cea mai mică; Δ = max − min HSL: L = (max + min) / 2; S = Δ / (1 − |2L − 1|); H = unghiul nuanței (0–360°) HSV: V = max; S = Δ / max CMYK: K = 1 − max; C = (1 − R′ − K) / (1 − K); M = (1 − G′ − K) / (1 − K); Y = (1 − B′ − K) / (1 − K) Luminanță: L_r = 0,2126·R + 0,7152·G + 0,0722·B (componente liniarizate) Contrast = (L_{mai deschisă} + 0,05) / (L_{mai închisă} + 0,05)

Nuanța H se calculează după componenta maximă: dacă e albastrul, H = 60° × ((R′ − G′) / Δ + 4); dacă e roșul, H = 60° × ((G′ − B′) / Δ mod 6); dacă e verdele, H = 60° × ((B′ − R′) / Δ + 2). Pentru luminanță, fiecare componentă se liniarizează: c / 12,92 dacă c ≤ 0,04045, altfel ((c + 0,055) / 1,055)^2,4. Conversia CMYK este cea „naivă”, fără profil de culoare, deci aproximativă: pentru tipar se folosesc profile ICC ale tipografiei.

Exemplu de calcul

Culoarea #0071E3 (un albastru frecvent pe site-uri):

HEX → RGB: 00 = 0, 71 = 7 × 16 + 1 = 113, E3 = 14 × 16 + 3 = 227 → rgb(0, 113, 227).
R′ = 0, G′ = 113/255 = 0,4431, B′ = 227/255 = 0,8902; max = 0,8902, min = 0, Δ = 0,8902.
HSL: L = 0,8902 / 2 = 0,4451 → 44,5%; S = 0,8902 / (1 − |0,8902 − 1|) = 0,8902 / 0,8902 = 100%; H = 60° × ((0 − 0,4431) / 0,8902 + 4) = 60° × 3,5022 = 210° → hsl(210, 100%, 44.5%) (calculatorul păstrează o zecimală; rotunjit, 45%).
HSV: V = 89%, S = 0,8902 / 0,8902 = 100% → hsv(210°, 100%, 89%).
CMYK: K = 1 − 0,8902 = 11%; C = (1 − 0 − 0,1098) / 0,8902 = 100%; M = (1 − 0,4431 − 0,1098) / 0,8902 = 50%; Y = 0% → cmyk(100%, 50%, 0%, 11%).
Luminanță: verdele liniarizat = ((0,4431 + 0,055) / 1,055)^2,4 = 0,1651; albastrul = 0,7682; L = 0,7152 × 0,1651 + 0,0722 × 0,7682 = 0,1736.
Contrast cu albul: (1 + 0,05) / (0,1736 + 0,05) ≈ 4,697, afișat 4,69:1. Cu negrul: (0,1736 + 0,05) / 0,05 ≈ 4,471, afișat 4,47:1. Calculatorul taie zecimalele în plus în loc să rotunjească în sus, ca un raport de 4,497 să nu apară ca 4,50 și să pară că trece pragul.

Concluzie: text albastru #0071E3 pe fundal alb trece pragul AA pentru text normal (4,5:1), dar nu și AAA (7:1). Pe fundal negru trece doar AA pentru text mare.

Ce formate acceptă câmpul de text

Format	Exemplu	Observații
HEX scurt	`#0af`	fiecare cifră se dublează: #00aaff
HEX complet	`#0071e3`	cel mai folosit în CSS și în programele de design
HEX cu transparență	`#0071e380`, `#0af8`	ultimele cifre sunt canalul alfa (80 ≈ 50%)
RGB / RGBA	`rgb(0, 113, 227)`, `rgba(0, 113, 227, .5)`	componente 0–255, alfa 0–1
HSL / HSLA	`hsl(210, 100%, 45%)`	nuanță în grade, saturație și luminozitate în procente
Nume CSS	`tomato`, `navy`, `rebeccapurple`	numele standard din CSS, în engleză

Pe lângă numele CSS, câmpul recunoaște și câteva culori de bază scrise în română (roșu, verde, albastru, galben, negru, alb și altele). Literele mari sau mici nu contează, iar # poate lipsi la codurile HEX.

HSL sau HSV: care e diferența

Ambele descriu culoarea prin nuanță (H), saturație (S) și o a treia mărime, dar aceasta din urmă e definită diferit. În HSL, L = 50% este culoarea „pură”, L = 100% este întotdeauna alb, iar L = 0% negru. În HSV (numit și HSB), V = 100% este culoarea cea mai strălucitoare posibilă pentru acea nuanță; albul se obține doar scăzând saturația. CSS folosește HSL, iar selectorul de culoare din Photoshop, Figma și multe aplicații folosește HSV/HSB. De aceea același albastru are S = 100% în ambele, dar L = 45% în HSL și V = 89% în HSV.

HSL e practic pentru variante ale aceleiași culori: păstrezi H și S și schimbi doar L ca să obții o versiune mai deschisă pentru fundal sau mai închisă pentru starea „hover” a unui buton.

CMYK: de ce valoarea e doar orientativă

Formula din calculator transformă RGB în CMYK matematic, fără să țină cont de hârtie, de cerneluri și de procesul de tipar. Rezultatul e bun ca punct de pornire sau pentru a comunica aproximativ o culoare, dar o tipografie va converti fișierul cu un profil ICC specific (de exemplu pentru hârtie cretată sau necretată), iar cifrele pot ieși destul de diferite. Pentru culori de brand care trebuie reproduse exact se folosesc și sisteme de culori spot, cu mostre fizice.

Contrastul pentru accesibilitate (WCAG)

Ghidurile WCAG 2.x cer un raport minim de contrast între text și fundal, ca textul să poată fi citit și de persoanele cu vedere slabă sau pe un ecran în soare. Raportul merge de la 1:1 (aceeași culoare) la 21:1 (negru pe alb).

Nivel	Text normal	Text mare
AA (minim recomandat)	4,5:1	3:1
AAA (îmbunătățit)	7:1	4,5:1

„Text mare” înseamnă cel puțin 18 puncte (aproximativ 24 px) sau 14 puncte (aproximativ 18,66 px) îngroșat. Pentru elemente grafice și margini de câmpuri, WCAG 2.1 cere cel puțin 3:1 față de culorile alăturate.

Calculatorul arată contrastul culorii alese cu albul și cu negrul. Dacă o folosești ca fundal, alege pentru text varianta cu raportul mai mare. Culorile foarte saturate de mijloc (portocaliu, verde deschis, cyan) au adesea contrast slab cu ambele; atunci închide sau deschide culoarea din HSL până trece pragul.

Formula WCAG 2.x folosește pragul 0,03928 la liniarizare, iar standardul sRGB folosește 0,04045. Diferența apare doar pentru componente foarte întunecate și nu schimbă rezultatul practic.

Cum se construiesc paletele

Nuanțe (tints și shades): culoarea amestecată treptat cu alb (variante deschise) și cu negru (variante închise). Bune pentru fundaluri, margini și stări ale butoanelor.
Complementară: nuanța rotită cu 180° pe cercul cromatic. Albastrul de 210° are complementara la 30°, un portocaliu. Contrast puternic, de folosit cu măsură, pentru accente.
Analoage: nuanțele vecine, la ±30°. Dau o paletă armonioasă și liniștită.
Triadă: trei nuanțe la câte 120° una de alta. Mai vie decât analoagele; de obicei una domină, celelalte două sunt accente.

Apasă pe orice mostră din paletă ca s-o selectezi; toate valorile și contrastele se recalculează pentru noua culoare.

Sfaturi practice

Pentru un site, alege o culoare principală care are contrast de cel puțin 4,5:1 cu albul dacă o folosești pentru linkuri sau text pe fundal deschis.
Nu transmite informații doar prin culoare (de exemplu, roșu pentru eroare): adaugă și text sau o iconiță.
Când copiezi o culoare dintr-o captură de ecran, valoarea poate fi ușor alterată de compresie sau de profilul de culoare al ecranului. Ia culoarea, dacă se poate, din fișierul sursă.

Întrebări frecvente

Cum transform un cod HEX în RGB?

Împarți codul în trei perechi de cifre și transformi fiecare din baza 16 în baza 10. La #FF8000: FF = 255, 80 = 128, 00 = 0, deci rgb(255, 128, 0). Cifrele A–F valorează 10–15.

Ce înseamnă ultimele două cifre dintr-un cod HEX de 8 caractere?

Sunt canalul alfa (opacitatea): 00 = complet transparent, FF = complet opac, 80 ≈ 50%. Codul #0071E380 este deci albastrul #0071E3 la aproximativ jumătate opacitate.

Pot trimite la tipografie valorile CMYK de aici?

Doar ca orientare. Conversia este matematică, fără profil ICC, iar tipografia va obține alte procente în funcție de hârtie și de mașina de tipar. Pentru culori exacte cere o probă de tipar sau folosește o culoare spot.

Ce contrast minim trebuie să aibă textul pe un site?

Conform WCAG 2.1, nivelul AA cere 4,5:1 pentru text normal și 3:1 pentru text mare (de la 18 pt, sau 14 pt îngroșat). Nivelul AAA cere 7:1, respectiv 4,5:1.

De ce aceeași culoare are valori diferite în HSL și HSV?

Pentru că a treia componentă este definită diferit: L (luminozitate) în HSL pune culoarea pură la 50%, iar V (valoare) în HSV o pune la 100%. Nuanța H este aceeași în ambele modele.

Ce este culoarea complementară?

Este culoarea aflată la 180° pe cercul nuanțelor, păstrând saturația și luminozitatea. Pentru albastru (210°) este un portocaliu (30°), pentru roșu (0°) este cyan (180°).

Convertor culori: HEX, RGB, HSL și CMYK