Alege o culoare în HSL e comod, dar stylesheet-urile, handoff-urile și documentele de brand încă folosesc HEX. Acest convertor închide diferența și îți oferă codul hexadic de șase cifre pentru orice combinație de nuanță, saturație și luminozitate.
Cum funcționează conversia din HSL în HEX
- Transformă saturația și luminozitatea în fracții: 60% devine 0.6.
- Calculează croma C = (1 − |2L − 1|) × S — asta arată cât de departe e culoarea de gri.
- Folosește nuanța pentru a plasa acea croma pe canalele roșu, verde și albastru, apoi deplasează toate trei cu L − C/2.
- Înmulțește fiecare canal cu 255, rotunjește-l și scrie-l ca două cifre hexazecimale.
Exemplu de aplicare
Rotunjirea are loc o singură dată, în ultimul pas, când fiecare canal este fixat la un întreg 0–255. Rezultatul e cel mai apropiat cod HEX de intrarea HSL și, de obicei, identic cu ce afișează un instrument de design.
HSL și HEX, explicate
Ce este HSL?
HSL împarte o culoare în nuanță (0–360° pe roata culorilor), saturație (cât de colorată, 0–100%) și luminozitate (cât de deschisă, 0–100%). Deoarece fiecare parte se potrivește modului în care oamenii descriu culoarea, HSL e cel mai simplu format pentru a crea nuanțe, umbre și palete consistente — manual sau în cod.
- Sintaxă:
- hsl(H, S%, L%)
- Interval:
- 0–360°, 0–100%, 0–100%
- Ideal pentru:
- palete, nuanțe și umbre, tematizare
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
HSL în HEX tabel de referință
Cele mai comune culori CSS, convertite din HSL în HEX.
| Culoare | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |