Convertidor de HEX a HSL
Convierte valores HEX a HSL al instante mientras escribes, con ejemplo resuelto y tabla de colores comunes. Gratis.
Escribe un valor HEX y lee el valor HSL justo debajo, o elige un color con el selector.
Ejemplo resuelto
HEX #ff5733 = HSL 11, 100%, 60%
Cómo funciona la conversión
- Un código HEX son los mismos tres canales RGB escritos en base 16: dos dígitos por canal, de 00 (0) a ff (255).
- HSL describe el mismo color por tono (0–360° en la rueda), saturación y luminosidad: práctico para oscurecer o desaturar un color cambiando solo un componente.
Colores comunes en HEX y HSL
| Color | HEX | HSL |
|---|---|---|
| Rojo | #ff0000 | 0, 100%, 50% |
| Naranja | #ffa500 | 39, 100%, 50% |
| Amarillo | #ffff00 | 60, 100%, 50% |
| Verde | #008000 | 120, 100%, 25% |
| Cian | #00ffff | 180, 100%, 50% |
| Azul | #0000ff | 240, 100%, 50% |
| Morado | #800080 | 300, 100%, 25% |
| Rosa | #ffc0cb | 350, 100%, 88% |
| Marrón | #a52a2a | 0, 59%, 41% |
| Blanco | #ffffff | 0, 0%, 100% |
| Gris | #808080 | 0, 0%, 50% |
| Negro | #000000 | 0, 0%, 0% |
Cada conversión se hace en tu navegador. Nada de lo que escribes se sube a BroBroGo.
Preguntas frecuentes
¿Cómo convierto HEX a HSL?
Escribe o pega tu valor HEX arriba: el valor HSL se actualiza mientras escribes. También puedes elegir el color visualmente con el selector.
¿La conversión es exacta?
Los valores se redondean a números enteros, el formato que esperan CSS y las herramientas de diseño; la diferencia queda muy por debajo de lo visible.