HSL descriu un color com la gent en parla: quin to, quina intensitat i quina lluminositat. Convertir un codi HEX a HSL és la manera més ràpida d’obtenir un color en una forma que puguis ajustar de veritat — aclarir-lo, apagar-ne la saturació o crear-hi tota una escala.
Com funciona la conversió de HEX a HSL
- Converteix el codi HEX a RGB i divideix cada canal per 255, perquè els tres quedin entre 0 i 1.
- Troba el valor més gran i el més petit dels tres. La seva mitjana és la lluminositat L.
- La diferència entre ells determina la saturació S: divideix-la per (2 − max − min) per a colors clars, o per (max + min) per a colors foscos.
- El canal que té el màxim decideix el to H — vermell a 0°, verd a 120°, blau a 240° — i els altres dos canals situen el to dins d’aquest segment.
Exemple resolt
Les matemàtiques són exactes, però els valors HSL normalment es redondegen a graus sencer i percentatges. Convertir de tornada pot deixar-te un o dos passos RGB de diferència respecte de l’original — invisible en la pràctica, però important saber-ho si fas molts viatges de va-i-vé amb colors.
HEX i HSL explicats
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
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ó
Taula de referència de HEX a HSL
Els colors CSS més comuns convertits de HEX a HSL.
| Color | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |