Triar un color en HSL és còmode, però les fulles d’estil, les entregues de disseny i els documents de marca encara funcionen amb HEX. Aquest convertidor tanca aquesta bretxa i et dóna el codi de sis dígits per a qualsevol combinació de to, saturació i lluminositat.
Com funciona la conversió de HSL a HEX
- Transforma la saturació i la lluminositat en fraccions: 60% esdevé 0.6.
- Calcula la cromia C = (1 − |2L − 1|) × S — així es mesura la distància del color respecte del gris.
- Utilitza el to per situar aquesta cromia als canals vermell, verd i blau, i després desplaça els tres per L − C/2.
- Multiplica cada canal per 255, arrodoneix-lo i escriu-lo com a dos dígits hexadecimals.
Exemple resolt
L’arrodoniment es fa una vegada, en l’últim pas, quan cada canal s’ajusta a un valor enter 0–255. El resultat és el codi HEX més proper a la teva entrada HSL i normalment idèntic al que mostra una eina de disseny.
HSL i HEX explicats
Què és HSL?
HSL divideix un color en to (0–360° a la roda de colors), saturació (quant de colorat, 0–100%) i lluminositat (quant de clar, 0–100%). Com que cada part coincideix amb la manera com la gent descriu el color, HSL és el format més fàcil per crear tintes, ombres i paletes coherents — a mà o en codi.
- Sintaxi:
- hsl(H, S%, L%)
- Rang:
- 0–360°, 0–100%, 0–100%
- Millor per:
- paletes, tintes i ombres, tematització
Què és HEX?
Un codi HEX és un nombre hexadecimal de sis dígits que emmagatzema els canals vermell, verd i blau d'un color darrere d'una # inicial. Cada parella de dígits cobreix un canal, de 00 (cap) a FF (complet), cosa que proporciona els mateixos 16,7 milions de colors que RGB amb una notació molt més curta. HEX és la predeterminada en CSS, eines de disseny i guies de marca.
- Sintaxi:
- #RRGGBB
- Rang:
- 00–FF per canal
- Millor per:
- CSS, lliurament de disseny, guies de marca
Taula de referència de HSL a HEX
Els colors CSS més comuns convertits de HSL a HEX.
| Color | 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 |