Convertir HEX a HSL

Cómo convertir HEX a HSL

Para convertir HEX a HSL, escribe tu color HEX en el cuadro de arriba y lee el valor HSL a su lado. Por ejemplo, #10B981 es hsl(160, 84%, 39%). El resultado se actualiza mientras escribes, y se muestran a la vez todos los demás formatos (HEX, RGB, HSL, CMYK y más).

Qué significan HEX y HSL

Un color HEX es un código hexadecimal de seis cifras precedido de #: dos cifras para el rojo, dos para el verde y dos para el azul, de 00 a FF. En #3B82F6, el rojo es 3B, el verde 82 y el azul F6. Una forma abreviada de tres cifras como #38F repite cada cifra, y con ocho cifras se añade la opacidad al final.

HSL describe un color con el matiz (de 0 a 360 grados en la rueda de color), la saturación (0 a 100 por ciento) y la luminosidad (0 a 100 por ciento). Es más fácil de razonar que RGB: mantén el matiz y cambia la luminosidad para obtener tonos más claros u oscuros del mismo color.

Convertir HEX a HSL a mano

Este es el cálculo para #10B981, paso a paso:

1. Convierte primero el código HEX a RGB: #10B981 es rgb(16, 185, 129).
2. Divide cada canal entre 255: 0.063, 0.725, 0.506.
3. La luminosidad es la media del mayor y el menor de los valores: 39%.
4. La saturación depende de lo separados que estén (84%) y el matiz es la posición en la rueda de color desde el canal dominante (160°).
5. Resultado: hsl(160, 84%, 39%).

Tabla de HEX a HSL con colores habituales

Cuándo usar HEX y cuándo HSL

HEX es la forma más compacta de escribir un color en CSS y en herramientas de diseño, por eso es el código que más gente copia y comparte. HSL es lo mejor cuando quieres ajustar un color a ojo o por código: sube la luminosidad para un estado de hover, baja la saturación para una variante apagada.

Conviene saber

• Los códigos HEX abreviados como #38F se expanden a #3388FF, y los de ocho cifras llevan un valor de opacidad al final.
• Los valores se redondean a números enteros al mostrarlos; el conversor conserva más precisión por dentro.
• El selector de color permite elegir un color a ojo cuando no tienes su código.
• Los colores en pantalla dependen de la calibración del monitor, así que el mismo código puede verse algo distinto en dispositivos distintos.