El conversor accepta totes les formes hex de CSS: el format de 6 dígits #3366cc, l'abreujat de 3 dígits #36c, i els formats de 4 i 8 dígits amb canal alfa, amb o sense el #. Mostra la cadena hsl() o hsla(), els valors senzills i un desglossament per component, a més d'una fila inversa de HSL a HEX quan calgui fer el camí contrari. Tot s'executa al navegador: sense pujar fitxers, sense compte i sense límits.
Conversor de HEX a HSL
Funciona del tot al navegador: sense pujar res ni registrar-te.
CSS
hsl(220, 60%, 50%)Com es converteix
To220
Saturació60%
Lluminositat50%
Camí contrari? HSL a HEX
#3366ccCom es converteix HEX a HSL?
Primer llegeix el codi hex com a vermell, verd i blau (0-255), i després torna a expressar aquest color com a to (hue), saturació i lluminositat. El to és l'angle sobre la roda de colors (0-360), la saturació indica la vivesa del color (0-100%) i la lluminositat com de clar és (0-100%). #3366cc esdevé hsl(220, 60%, 50%). Aquest conversor ho fa a l'instant mentre escrius.
Com s’utilitza
- 1Introdueix un codi hex. Escriu o enganxa un color hex com #3366cc (o #36c), o tria'n un amb el selector de color. El # és opcional.
- 2Llegeix el valor HSL. La cadena hsl(), els valors senzills i una previsualització del color en directe s'actualitzen mentre escrius, amb un desglossament per component del to, la saturació i la lluminositat.
- 3Copia el format que necessitis. Fes clic a Copia al costat de la cadena hsl() o dels valors en brut. Necessites el camí contrari? Introdueix el to, la saturació i la lluminositat a sota per recuperar el codi hex.
Per a qui és
- Desenvolupadors front-end que passen un codi hex a hsl() per ajustar la lluminositat en estats hover i focus sense haver de triar un color nou.
- Dissenyadors que creen paletes i mantenen el to fix mentre ajusten la saturació i la lluminositat per generar tons i matisos a partir d'un sol color de marca.
- Autors de temes i tokens de disseny que guarden els colors en HSL perquè és molt més fàcil de llegir i ajustar a mà que una cadena hex.
- Qualsevol que hagi d'igualar colors entre eines: unes volen hex (Figma, la majoria de CSS) i altres volen HSL (helpers de SCSS, alguns sistemes de color).
Preguntes freqüents
Aquest conversor de HEX a HSL és gratis?
Sí, és 100% gratis, sense registre i sense límits. Funciona íntegrament al navegador.
Es pugen els meus colors a algun lloc?
No. La conversió és JavaScript pur que s'executa al teu dispositiu, no s'envia res a cap servidor, i continua funcionant sense connexió un cop carregada la pàgina.
Què és l'HSL?
HSL vol dir to (hue), saturació (saturation) i lluminositat (lightness). El to és un angle de 0 a 360 graus sobre la roda de colors, la saturació indica la vivesa del color de 0 a 100 per cent, i la lluminositat va del 0 per cent (negre), passant pel color pur al 50 per cent, fins al 100 per cent (blanc).
Com es converteix hex a HSL a mà?
Converteix l'hex a vermell, verd i blau i divideix cada valor per 255. Agafa el màxim i el mínim dels tres: la lluminositat és la seva mitjana, la saturació és (màx - mín) dividit per (1 - |2L - 1|), i el to surt de quin canal és el màxim, escalat de 0 a 360 graus.
Admet el format abreujat de 3 dígits com #36c?
Sí. En l'abreviatura de CSS cada dígit es duplica, així que #36c s'expandeix a #3366cc i es converteix en hsl(220, 60%, 50%). El format de 4 dígits funciona igual, amb l'últim dígit com a alfa.
Com gestiona la transparència (HSLA)?
Un codi hex de 8 dígits porta l'alfa en el seu últim parell. Aquest byte (0-255) es divideix per 255 per obtenir l'alfa de 0 a 1 que espera hsla(), arrodonit a tres decimals - així #3366cc80 esdevé hsla(220, 60%, 50%, 0.502).
Pot convertir HSL de nou a HEX?
Sí. Fes servir la fila de HSL a HEX sota el resultat: introdueix el to (0-360) més la saturació i la lluminositat (0-100%) i retorna el codi hex a l'instant. Els valors fora de rang es limiten.
Per què és útil l'HSL en lloc de l'hex?
L'HSL es llegeix fàcilment: pots aclarir un color pujant L, apagar-lo baixant S, o canviar-ne la família modificant H, tot sense haver d'endevinar dígits hex. Això el fa ideal per crear paletes coherents, estats hover i tokens de disseny.