Convertidor de HEX a HSL

1. Introduce un color HEX de 3 o 6 dígitos, con o sin # inicial, o selecciónalo con el selector.
2. Ajusta el tono entre 0 y 360 grados, o la saturación y la luminosidad entre 0 % y 100 %.
3. Consulta la vista previa y los valores HEX, HSL y RGB sincronizados.
4. Pulsa el botón de copiar junto al valor que necesites.
5. Selecciona Restablecer para volver al color inicial.

Convertidor de HEX a HSL

HEX y HSL son dos formas de representar el mismo color. HEX codifica los canales rojo, verde y azul en pares hexadecimales. HSL describe tono, saturación y luminosidad, lo que puede facilitar los ajustes visuales. Este editor convierte un color HEX a HSL y RGB, y permite modificar los valores HSL para crear variaciones.

Qué es HEX

Un color HEX estándar de seis dígitos usa el formato #RRGGBB, con un par de dígitos hexadecimales para cada canal rojo, verde y azul. Por ejemplo, #4F46E5 corresponde aproximadamente a los valores RGB 79, 70 y 229. Los colores HEX son habituales en HTML y CSS para texto, fondos, bordes, botones y otros elementos de interfaz. En este convertidor, el símbolo # inicial es opcional.

Qué es HSL

HSL significa tono, saturación y luminosidad. El tono identifica una posición en una rueda de color de 360 grados. La saturación describe la intensidad del color, desde 0 % (gris neutro) hasta 100 %. La luminosidad indica lo claro u oscuro que es: 0 % es negro, 50 % es el punto medio y 100 % es blanco.

Ejemplo de HEX a HSL

Introduce #4F46E5 para obtener aproximadamente hsl(248, 76 %, 59 %) y rgb(79, 70, 229). Los canales HSL se muestran redondeados a números enteros, como representación práctica y no con todos los decimales de la conversión.

Edita colores con HSL

Después de introducir un color HEX, cambia el tono, la saturación o la luminosidad para probar una variación. Por ejemplo, aumenta la luminosidad para crear un fondo más claro o reduce la saturación para obtener un color más suave. La vista previa y los valores HEX, HSL y RGB se mantienen sincronizados, de modo que puedes copiar el nuevo HEX a CSS o a una herramienta de diseño.

HEX, RGB y HSL

HEX representa los canales rojo, verde y azul en notación hexadecimal; RGB utiliza valores numéricos para esos canales; HSL utiliza tono, saturación y luminosidad. Son representaciones distintas del mismo color. Por ejemplo, #4F46E5 equivale a rgb(79, 70, 229) y aproximadamente a hsl(248, 76 %, 59 %).

HEX admitidos y validación

El editor acepta colores HEX de 3 o 6 dígitos, con o sin #. No ofrece conversión independiente de HEX de 8 dígitos ni de transparencia. El tono debe estar entre 0 y 360 grados; la saturación y la luminosidad, entre 0 % y 100 %. Los valores no válidos muestran un error hasta que se corrijan.

Cuándo usar un convertidor de HEX a HSL

Convierte un color CSS existente a HSL, ajusta un color de marca para estados de desplazamiento o activos, crea colores más claros o suaves para una interfaz, construye una paleta o compara formatos al depurar CSS. Edita HSL directamente y copia el resultado HEX, HSL o RGB actualizado.

Introduce un color HEX de 3 o 6 dígitos para ver valores HSL y RGB sincronizados junto con una vista previa en tiempo real.

Ajusta directamente los canales HSL. El color, los valores HEX y RGB y la vista previa se actualizan automáticamente.

Introduce un valor HEX con o sin #, o selecciona un color con el selector integrado.

Copia individualmente los valores HEX, HSL o RGB, o restablece el editor a su color inicial.