Convertirea unei culori între RGB, HSL și hexazecimal

Lucrul cu culoarea pe web implică jonglarea permanentă între mai multe notații. Un convertor de culori evită erorile manuale și permite trecerea instantanee de la un format la altul în funcție de contextul de utilizare. Fiecare format are punctele sale forte, iar a ști pe care să-l folosești este unul dintre reflexele dezvoltatorului front-end.

Iată utilizările tipice care motivează o conversie de culoare:

• RGB este nativ în CSS și JavaScript, citibil pentru oameni pentru a înțelege o dominantă (canale roșu, verde, albastru pe 0-255).
• HSL face modificarea unei nuanțe trivială: este suficient să ajustezi saturația sau luminozitatea fără a recalcula fiecare canal.
• HEX este formatul canonic pentru copiere-lipire: șase caractere, compatibil peste tot, ideal pentru machetele Figma, Sketch sau ghidurile de stil.
• Conversiile HEX to RGB, RGB to HEX, HEX to HSL și reciprocele lor sunt operațiile cele mai frecvente în CSS și JavaScript.

RGB și RGBA (Red, Green, Blue, Alpha)

Fiecare canal este codat pe un întreg între 0 și 255, ceea ce corespunde unui octet pe componentă și dă 16 777 216 de culori posibile. Canalul alfa al RGBA merge de la 0 (transparent) la 1 (opac) și controlează transparența.

.buton {
    background-color: rgb(20, 0, 182);
    border-color: rgba(20, 0, 182, 0.5);
}

HEX și HEX8 (notație hexazecimală)

Format compact foarte răspândit: #RRGGBB pe șase caractere, unde fiecare pereche reprezintă un canal RGB în bază 16. Varianta #RRGGBBAA pe opt caractere adaugă canalul alfa în hexazecimal (00 transparent, FF opac). Notația scurtă #RGB există de asemenea: #F53 este echivalentul lui #FF5533.

.titlu  { color: #1400B6; }
.umbra  { color: #1400B680; }   /* alpha 50% */
.accent { color: #F53; }        /* formă scurtă */

HSL și HSLA (Hue, Saturation, Lightness, Alpha)

HSL descrie culoarea în mod perceptual. Hue este un unghi pe roata cromatică (0 până la 360°), Saturation și Lightness sunt procente. Este formatul de preferat pentru a genera variante: a lumina un buton survolat, a desatura o stare dezactivată, a crea o paletă coerentă variind doar nuanța.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* mai deschis */
$primary-muted: hsl(247, 30%, 36%);    /* mai puțin saturat */

Alte formate existente

CMYK (Cyan, Magenta, Yellow, Key) este utilizat în imprimerie: descrie o culoare prin scădere de cerneluri și nu este pertinent pentru ecran. OKLCH și LAB sunt spații perceptual uniforme apărute în CSS Color Level 4; permit un control mai bun al luminozității resimțite. Acest instrument se concentrează pe conversiile RGB, HEX și HSL, care acoperă imensa majoritate a nevoilor web.

HEX spre RGB revine la a parsa șirul prin perechi de caractere și a interpreta fiecare pereche ca un întreg în bază 16:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB spre HEX este operația inversă: fiecare canal este convertit în bază 16, completat la două caractere, apoi concatenat.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB spre HSL este mai algoritmic. Se normalizează canalele între 0 și 1, se calculează minimul și maximul pentru a deduce luminozitatea, apoi saturația, apoi nuanța în funcție de canalul dominant. Formula completă este documentată în specificația CSS Color Module Level 3.

Instrumentul funcționează în ambele sensuri între RGB, HEX și HSL. Pentru a efectua o conversie:

1. Alege formatul de intrare: RGB, HEX sau HSL.
2. Introdu valoarea (de exemplu #1400B6, rgb(20, 0, 182) sau hsl(247, 100%, 36%)).
3. Lansează conversia: echivalentele în celelalte două formate se afișează imediat.
4. Copiază rezultatul dorit prin butonul dedicat și lipește-l în foaia ta de stil sau macheta ta.

Calculul este efectuat pe partea browserului, nicio dată nu este trimisă către un server.

• Design web și CSS: recuperează un HEX dintr-o machetă și obține HSL echivalent pentru a genera o stare hover sau active fără a devia de la nuanță.
• Identitate vizuală și paletă: declină o culoare primară în mai multe variante (deschis, închis, atenuat) jucând pe luminozitate sau saturație HSL.
• Ilustrație și grafică: transpune o culoare ecran (RGB) spre un cod hexazecimal de transmis unui software sau client.
• Accesibilitate: convertește în formatul RGB pentru a calcula apoi un raport de contrast (WCAG AA cere 4.5:1 pentru text normal) cu culoarea de fundal.
• Variabile CSS și preprocesoare: alimentează token-uri de design într-un fișier SASS sau o temă Tailwind dintr-o singură culoare de referință.

Câteva conversii complete pentru a ilustra corespondența între cele trei formate:

#1400B6 -> rgb(20, 0, 182)    -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51)   -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113)  -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15)  -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0)       -> hsl(0, 0%, 0%)

Cu canal alfa:

#1400B680 -> rgba(20, 0, 182, 0.50)   -> hsla(247, 100%, 36%, 0.50)
#FF5733CC -> rgba(255, 87, 51, 0.80)  -> hsla(11, 100%, 60%, 0.80)

Care este diferența dintre HEX și HEX8?

HEX clasic codează trei canale RGB pe șase caractere (#RRGGBB). HEX8 adaugă două caractere pentru canalul alfa (#RRGGBBAA), ceea ce permite gestionarea transparenței într-un singur șir. #1400B6FF și #1400B6 dau vizual aceeași culoare, opacă.

Este de preferat HSL sau RGB în CSS?

Ambele sunt echivalente la randare. HSL este mai expresiv pentru a genera o paletă coerentă sau variante de stare (hover, focus), pentru că modifici un singur parametru perceptual. RGB rămâne practic când lucrezi cu date provenite dintr-un canvas sau un senzor.

De ce HEX-ul meu dă o nuanță diferită de cea așteptată?

Trei cauze frecvente: confuzie între #RGB scurt și #RRGGBB lung (caracterele sunt duplicate, nu concatenate), eroare de copiere pe un caracter, sau afișare pe un ecran necalibrat. Verifică de asemenea că CSS-ul tău nu suprapune o opacitate părinte care modifică randarea finală.

La ce servește canalul alfa al RGBA și HSLA?

Canalul alfa controlează opacitatea culorii, de la 0 (total transparent) la 1 (total opac). Este util pentru overlay-uri, umbre, stări dezactivate sau suprapuneri pe imagine. Spre deosebire de proprietatea CSS opacity, RGBA și HSLA afectează doar culoarea țintită și nu copiii săi.

Poți converti o culoare fără pierdere de precizie?

Între RGB și HEX conversia este exactă, ambele formate codează aceeași informație pe 24 biți. Conversia spre HSL implică rotunjiri pe nuanță, saturație și luminozitate; un dus-întors RGB > HSL > RGB poate deci returna o valoare decalată cu o unitate pe anumite canale.

De ce să utilizezi un convertor online mai degrabă decât o funcție proprie?

Pentru un test punctual, prototiparea unei palete sau verificarea rapidă a echivalentului HEX al unei culori HSL extrase dintr-o machetă, un convertor online este imediat. Pentru o nevoie programatică recurentă, o bibliotecă precum color, chroma-js sau tinycolor2 rămâne mai potrivită.