Convertir RGB a HSL

Cómo convertir RGB a HSL

Para convertir RGB a HSL, escribe tu color RGB en el cuadro de arriba y lee el valor HSL a su lado. Por ejemplo, rgb(245, 158, 11) es hsl(38, 92%, 50%). 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 RGB y HSL

RGB describe un color como cantidades de luz roja, verde y azul, cada una de 0 a 255. rgb(59, 130, 246) es el mismo color que #3B82F6. CSS también admite un valor de opacidad, como en rgba(59, 130, 246, 0.5).

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 RGB a HSL a mano

Este es el cálculo para rgb(245, 158, 11), paso a paso:

1. Divide cada canal entre 255: 0.961, 0.620, 0.043.
2. La luminosidad es la media del mayor y el menor de los valores: 50%.
3. La saturación depende de lo separados que estén (92%) y el matiz es la posición en la rueda de color desde el canal dominante (38°).
4. Resultado: hsl(38, 92%, 50%).

Tabla de RGB a HSL con colores habituales

Cuándo usar RGB y cuándo HSL

RGB es el modelo que usan las pantallas y sobre el que se construyen funciones CSS como rgba(), lo que lo hace útil cuando necesitas transparencia o quieres calcular colores en código. 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.