Convierte Hex a HSL online
Hex a HSL/HSLA para CSS. Soporta hex corto y alfa, con vista previa en vivo.Runs locally in your browser; files never leave your device.Runs locally in your bro
HSL separa tono, saturación y luminosidad — retocar “un poco más oscuro” suele ser más fácil que editar nibbles hex.
Hex de ocho dígitos con alfa mapea a hsla; colores opacos sacan hsl.
Pueden haber pequeñas diferencias frente a apps de diseño por espacios de color — confía en la muestra de vista previa.
Cómo convertir
- Introduce hex
- Revisa salida HSL y muestra
- Copia en CSS
Para qué sirve HSL
- Construir variantes más claras/oscuras en variables CSS.
- Alinear código con hex del handoff de diseño.
- La vista previa instantánea reduce prueba y error.
Escenarios
- Hex de marca → propiedad personalizada hsl
- Hover de botón vía cambio de luminosidad
- Inspeccionar alfa en un hex de 8 dígitos
Consejos
- El `#` es opcional en la entrada.
- El corto `#abc` se expande a `#aabbcc`.
- Copia hsl frente a hsla según necesites alfa.
Ejemplos
| Entrada | Salida | Nota |
|---|---|---|
| #FF5733 | hsl(...) | Opaco |
| #FF573380 | hsla(...) | Semitransparente |
Preguntas Hex → HSL
- ¿Relación con el convertidor RGB?
- El sitio también tiene hex↔RGB. HSL suele ser más agradable para ajustes perceptivos claro/oscuro.
- ¿Desajuste frente a Figma?
- Redondeo y gamut difieren — juzga en el navegador destino.