RGB îți dă trei canale zecimale între 0 și 255. Conversia în HEX transformă fiecare canal într-un număr hexazecimal de două cifre, astfel încât întreaga culoare se potrivește într-un token compact pe care orice browser, instrument de design și ghid de stil îl înțelege.
Cum funcționează conversia din RGB în HEX
- Ia canalul roșu și împarte-l la 16: câtul e prima cifră, restul e a doua.
- Scrie cifrele 10–15 ca literele A–F — 255 devine FF.
- Repetă pentru verde și albastru, completând cifrele simple cu zero în față: 5 devine 05.
- Unește cele trei perechi și pune un # în față.
Exemplu de aplicare
Exact, atâta timp cât canalele sunt numere întregi între 0 și 255. Valorile fracționare precum rgb(79.5, 70, 229) sunt rotunjite mai întâi la cel mai apropiat întreg, pentru că HEX nu poate stoca valori întreagă și fracționară.
RGB și HEX, explicate
Ce este RGB?
RGB descrie o culoare ca trei canale de lumină — roșu, verde și albastru — fiecare între 0 și 255. Reflectă modul în care funcționează ecranele: toate la 255 dau alb, toate la 0 dau negru. RGB e alegerea potrivită când trebuie să calculezi cu o culoare, iar rgba() adaugă transparență peste.
- Sintaxă:
- rgb(R, G, B)
- Interval:
- 0–255 per canal
- Ideal pentru:
- cod, canvas, transparență cu rgba()
Ce este HEX?
Un cod HEX este un număr hexazecimal de șase cifre care stochează canalele roșu, verde și albastru ale unei culori, precedat de #. Fiecare pereche de cifre reprezintă un canal, de la 00 (niciunul) la FF (maxim), oferind aceleași 16,7 milioane de culori ca RGB, dar într-o notație mai scurtă. HEX este implicitul în CSS, în instrumentele de design și în ghidurile de brand.
- Sintaxă:
- #RRGGBB
- Interval:
- 00–FF per canal
- Ideal pentru:
- CSS, predare design, ghiduri de brand
RGB în HEX tabel de referință
Cele mai comune culori CSS, convertite din RGB în HEX.
| Culoare | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |