Convertizor de culori HEX la RGB

Ce este un cod de culoare HEX?

Un cod de culoare HEX este un șir alfanumeric de șase caractere utilizat în designul web și grafica digitală pentru a reprezenta o anumită culoare.#RRGGBB, unde fiecare pereche de două caractere codifică intensitatea uneia dintre cele trei culori primare aditive - roșu (RR), verde (GG) și albastru (BB) - folosind notația hexadecimală (baza 16).00(intensitate zero) până laFF(intensitate maximă, echivalentă cu 255 la zecimale).

Codurile HEX își au originea în necesitatea de a defini culorile în HTML și CSS fără a se baza pe cuvinte cheie de culoare numite.rgb(), hsl(), șioklch(), HEX rămâne notația cea mai utilizată în dezvoltarea front-end, transferurile de design și liniile directoare de branding.

Numărul total de culori unice care pot fi reprezentate cu coduri HEX de șase cifre este de 16.777.216 (256 x 256 x 256).

Codurile HEX sunt insensibile la majuscule şi minuscule, deci#ff8000și#FF8000Unele ghiduri de stil preferă majuscule pentru ușurința citirii, în timp ce minifierele CSS produc adesea minuscule pentru a salva byte - deși în practică diferența este neglijabilă.

Cum să convertiți HEX la RGB pas cu pas

Convertirea unui cod de culoare HEX în echivalentul său RGB este simplă. Procesul implică împărțirea șirului de șase caractere în trei perechi și convertirea fiecărei perechi de la hexadecimal (baza 16) la decimal (baza 10).

1. Scoate simbolul hash.Dacă codul HEX începe cu#De exemplu,#1A2B3Cdevine1A2B3C.
2. Împărţiţi-vă în trei perechi.Împărțiți restul șirului în trei grupuri de două caractere:1A, 2B, 3C.
3. Converteşte fiecare pereche în cifre decimale.Se utilizează sistemul hexadecimal de valori pozitive, în care prima cifră se înmulțește cu 16 și se adaugă a doua cifră:
   • Roşu:1A-> (1 x 16) + 10 =26
   • Verde:2B-> (2 x 16) + 11 =43
   • Albastru:3C-> (3 x 16) + 12 =60
4. Scrie valoarea RGB.Combinați cele trei valori decimale:rgb(26, 43, 60).

Cifrele hexadecimale și echivalentele lor decimale sunt: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15. Memorizarea de la A la F este singura parte care diferă de aritmetica decimală standard.

Pentru conversia programatică, majoritatea limbilor oferă funcții încorporate.parseInt("1A", 16)înregistrări26În Python,int("1A", 16)CSS-ul însuși gestionează ambele formate în mod nativ, așa că conversia este în primul rând utilă atunci când trebuie să manipulezi canalele individuale de culoare în cod - de exemplu, ajustarea luminozității, crearea gradienților programatic sau amestecarea a două culori.

Coduri HEX de 3 cifre față de 6 cifre

CSS acceptă un format HEX de 3 cifre (#RGBÎn această stenografie, fiecare cifră este extinsă prin dublarea acesteia.

• #F80se extinde la#FF8800-> rgb ((255, 136, 0)
• #FFFse extinde la#FFFFFF-> rgb ((255, 255, 255)
• #000se extinde la#000000-> rgb ((0, 0, 0)
• #09Cse extinde la#0099CC-> rgb ((0, 153, 204)
• #A3Fse extinde la#AA33FF-> rgb{170, 51, 255)

Notația de 3 cifre reduce numărul de culori disponibile de la 16,7 milioane la doar 4,096 (16 x 16 x 16), astfel încât nu poate reprezenta fiecare culoare.

CSS suportă, de asemenea, 4 cifre (#RGBA) şi 8 cifre (#RRGGBBAA) Coduri HEX care includ un canal alfa (transparență).FFeste complet opacă și00este complet transparentă.#FF880080reprezintă culoareargb(255, 136, 0)Convertorul nostru se concentrează pe formatele standard de 3 și 6 cifre; dacă introduceți un cod cu un canal alfa, acesta va procesa doar porțiunea RGB.

HEX la tabelul de referință RGB

Mai jos este un tabel de referință al culorilor HEX comune și a echivalentelor lor RGB. Acest tabel acoperă culorile cele mai frecvent utilizate în designul web, culorile denumite CSS și alegerile paletei de mărci populare.

CSS definește 147 de culori numite în total, fiecare cu o valoare HEX corespunzătoare.

Culori de marcă populare - valorile HEX și RGB

Dezvoltatorii și designerii au adesea nevoie de valorile exacte HEX și RGB ale culorilor de marcă populare pentru modele, integrări și ghiduri de stil.

Când implementați culori de marcă în CSS, confirmați întotdeauna valorile față de pagina oficială de resurse a mărcii pentru a asigura acuratețea. Culorile se pot schimba ușor între ecrane, astfel încât consistența în cod este esențială.

Compararea modelelor de culori: HEX, RGB, HSL și CMYK

Înțelegând când să utilizați fiecare model de culoare vă ajută să lucrați mai eficient în diferite instrumente și medii:

HEX şi RGB sunt identice din punct de vedere matematic-- ele reprezintă același spațiu de culoare folosind notații diferite. Convertirea între ele este o traducere simplă de la baza-16 la baza-10 fără pierderi de precizie sau diferențe de gamă. HSL, pe de altă parte, este o transformare a RGB într-un sistem de coordonate cilindrice care face mai ușor raționamentul despre nuanță, saturație și luminozitate în mod independent. CMYK este un model de culoare subtractiv utilizat în imprimare și nu poate reprezenta toate culorile RGB (și viceversa), astfel încât conversiile între RGB și CMYK sunt aproximative.

În CSS-ul modern (nivelul 4),color()funcţie şi noi spaţii de culoare cum ar fioklch()șidisplay-p3Cu toate acestea, HEX și RGB rămân linia de bază pentru compatibilitatea web și sunt suportate de fiecare browser utilizat astăzi.

Utilizarea HEX și RGB în CSS și JavaScript

Atât valorile HEX, cât și cele RGB sunt valabile în CSS și produc rezultate identice.

Declarații CSS:

/* HEX notation */
body { background-color: #1A2B3C; }

/* RGB notation */
body { background-color: rgb(26, 43, 60); }

/* RGB with alpha (transparency) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

/* Modern CSS — space-separated syntax */
.card { color: rgb(26 43 60 / 80%); }

Funcții de conversie JavaScript:

// HEX to RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB to HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

Când lucrați cu API-ul HTML Canvas, culorile trebuie adesea setate ca șiruri."#FF8000"și"rgb(255, 128, 0)"să lucreze pentrufillStyleșistrokeStyleCu toate acestea,getImageData()metoda returnează datele pixelului ca o matrice de 0 - 255 de numere întregi (RGBA), făcând din RGB formatul natural pentru manipularea la nivel de pixel.

În proprietățile personalizate CSS (variabile), valorile HEX sunt de obicei stocate pentru simplitate:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* for use with rgba() */
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

Acest model de stocare a valorilor canalelor RGB brute ca o variabilă CSS este o tehnică populară care vă permite să aplicați opacitatea dinamic fără a converti între formate la timpul de rulare.

Accesibilitatea și contrastul de culori

Convertirea HEX în RGB este adesea primul pas în calcularea raporturilor de contrast de culoare pentru conformitatea cu accesibilitatea.4.5: 1pentru textul normal; și3: 1pentru text mare (18px+ bold sau 24px+ regular).

Formula raportului de contrast necesităluminanță relativăa fiecărei culori, care este calculată din valori RGB liniare.

1. Convertă HEX în RGB (0 - 255 pe canal).
2. Normalizează fiecare canal la 0 - 1 prin împărţirea la 255.
3. Aplicați formula de liniarizare sRGB: dacă valoarea este <= 0,04045, împărțiți cu 12,92; în caz contrar, calculați ((valoare + 0,055) / 1,055) ^ 2.4.
4. Se calculează luminanța: L = 0,2126 x R + 0,7152 x G + 0,0722 x B.
5. Calculați raportul de contrast între două culori: (L1 + 0,05) / (L2 + 0,05) unde L1 este culoarea mai deschisă.

După cum puteți vedea, valorile RGB sunt intrarea esențială pentru fiecare calcul de contrast al accesibilității. Instrumente precum WebAIM Contrast Checker, selectorul de culori Chrome DevTools și scannerul de accesibilitate axe efectuează toate această conversie intern.

Pentru designeri, o regulă rapidă: textul întunecat pe un fundal deschis (sau invers) cu o diferență de luminanță de cel puțin 125 și o diferență de culoare de cel puțin 500 (folosind suma diferențelor absolute pe canalele R, G, B) va trece în general standardele WCAG AA.