Convertidor HSL a HEX
Convierte valores HSL (Tono, Saturación, Luminosidad) a código hexadecimal HEX para uso en CSS, HTML y herramientas de diseño.
Valores HSL
HSL(248°, 75%, 64%) Ctrl+C
#6C5CE7RGB(108, 92, 231)
Variantes de luminosidad
Cómo Usar el Convertidor HSL a HEX
1Selecciona el tono (H) — Desliza por el espectro de color (0°=rojo, 120°=verde, 240°=azul).
2Ajusta S y L — S controla la intensidad, L la claridad. Experimenta hasta obtener el color deseado.
3Copia el HEX — El código hexadecimal se actualiza en tiempo real. Cópialo para usar en CSS, HTML o Figma.
¿Por Qué Convertir HSL a HEX?
Compatibilidad Email
Los clientes de correo (Outlook, Gmail) tienen soporte CSS limitado. HEX es el formato más compatible para colores en plantillas de email HTML.
Documentación
Los manuales de marca y guías de estilo usan HEX como formato estándar para especificar colores digitales. Convertir desde HSL te da el código que va en el brand book.
APIs y Exports
La mayoría de APIs, bases de datos y formatos de exportación (JSON, XML) almacenan colores como HEX. Si generaste colores en HSL, necesitas HEX para persistirlos.
Herramientas de Diseño
Figma, Sketch, Adobe XD y Canva aceptan HEX en sus selectores de color. Pega el código directamente para usar tu color HSL en cualquier herramienta.
HSL a HEX: Colores Comunes
| Color | HSL | HEX |
|---|---|---|
| Rojo | 0°, 100%, 50% | #FF0000 |
| Naranja | 30°, 100%, 50% | #FF8000 |
| Amarillo | 60°, 100%, 50% | #FFFF00 |
| Verde | 120°, 100%, 50% | #00FF00 |
| Azul | 240°, 100%, 50% | #0000FF |
| 🟣 Púrpura | 300°, 100%, 50% | #FF00FF |
| Negro | 0°, 0%, 0% | #000000 |
| Blanco | 0°, 0%, 100% | #FFFFFF |
Preguntas Frecuentes
¿Cuándo necesito HEX si CSS ya acepta hsl()?
HEX es necesario cuando trabajas con: 1) Email HTML (clientes de correo con soporte CSS limitado); 2) APIs que solo aceptan HEX; 3) Archivos SVG inline; 4) Otros desarrolladores que prefieren HEX; 5) Documentación de marca.
¿La conversión HSL→HEX pierde precisión?
Mínimamente. HSL usa valores continuos pero HEX solo tiene 256 niveles por canal. La diferencia máxima es <0.4% en cada canal, imperceptible al ojo humano.
¿Puedo generar HEX con transparencia?
Sí, usando HEX de 8 dígitos (
#RRGGBBAA). Nuestra herramienta genera el HEX de 6 dígitos (opaco). Para agregar alfa, añade dos dígitos: 80 = 50% opacidad, CC = 80%, FF = 100%.¿Cómo elijo buenos valores HSL para una paleta?
Empieza con un tono (H). Para armonía: usa el mismo S y L con H rotados (complementario: H±180°, triádico: H±120°). Para contraste: varía L significativamente (30% y 70%). Para cohesión: mantén S constante.
¿HEX es case-sensitive?
No,
#6c5ce7 y #6C5CE7 son idénticos para navegadores y herramientas de diseño. Nuestra herramienta genera HEX en mayúsculas por convención de legibilidad.