Conversor de HSL a HSLA
Pega un valor HSL y obtén HSLA al instante. Cualquier otro formato también sirve.
Tabla de opacidad: alfa en HEX y HSLA
En HEX de 8 dígitos, los dos últimos fijan la opacidad: FF es totalmente opaco, 80 es cerca del 50 % y 00 es totalmente transparente. La tabla muestra el color de ejemplo cada 5 %.
| Opacidad | Alfa en HEX | HEX | HSLA |
|---|---|---|---|
| 100% | ff | #ff5733 | hsla(10.59, 100%, 60%, 1) |
| 95% | f2 | #ff5733f2 | hsla(10.59, 100%, 60%, 0.95) |
| 90% | e6 | #ff5733e6 | hsla(10.59, 100%, 60%, 0.9) |
| 85% | d9 | #ff5733d9 | hsla(10.59, 100%, 60%, 0.85) |
| 80% | cc | #ff5733cc | hsla(10.59, 100%, 60%, 0.8) |
| 75% | bf | #ff5733bf | hsla(10.59, 100%, 60%, 0.75) |
| 70% | b3 | #ff5733b3 | hsla(10.59, 100%, 60%, 0.7) |
| 65% | a6 | #ff5733a6 | hsla(10.59, 100%, 60%, 0.65) |
| 60% | 99 | #ff573399 | hsla(10.59, 100%, 60%, 0.6) |
| 55% | 8c | #ff57338c | hsla(10.59, 100%, 60%, 0.55) |
| 50% | 80 | #ff573380 | hsla(10.59, 100%, 60%, 0.5) |
| 45% | 73 | #ff573373 | hsla(10.59, 100%, 60%, 0.45) |
| 40% | 66 | #ff573366 | hsla(10.59, 100%, 60%, 0.4) |
| 35% | 59 | #ff573359 | hsla(10.59, 100%, 60%, 0.35) |
| 30% | 4d | #ff57334d | hsla(10.59, 100%, 60%, 0.3) |
| 25% | 40 | #ff573340 | hsla(10.59, 100%, 60%, 0.25) |
| 20% | 33 | #ff573333 | hsla(10.59, 100%, 60%, 0.2) |
| 15% | 26 | #ff573326 | hsla(10.59, 100%, 60%, 0.15) |
| 10% | 1a | #ff57331a | hsla(10.59, 100%, 60%, 0.1) |
| 5% | 0d | #ff57330d | hsla(10.59, 100%, 60%, 0.05) |
| 0% | 00 | #ff573300 | hsla(10.59, 100%, 60%, 0) |
Ejemplos de HSL a HSLA
Sobre HSL y HSLA
HSL describe el matiz en grados y la saturación y la luminosidad en porcentaje. Es fácil de leer, pero su luminosidad no es uniforme a la vista: un amarillo al 50 % parece mucho más claro que un azul al 50 %.
HSLA es HSL con un canal alfa para la opacidad, escrito como hsla(11, 100%, 60%, 0.5). El alfa va de 0 (totalmente transparente) a 1 (totalmente opaco), y el CSS moderno también lo acepta dentro de hsl().
Cómo funciona la conversión
Leemos el valor HSL, lo pasamos a CIE XYZ con las matrices de la especificación CSS Color 4 y de ahí a HSLA. Los valores fuera de la gama de destino se ajustan con el algoritmo de CSS Color 4, que conserva la luminosidad y el matiz y reduce el croma.
Preguntas y respuestas
¿Cómo convierto HSL a HSLA?
Pega o escribe un valor HSL en el campo de arriba. PickShade lo convierte con las fórmulas de CSS Color 4 mientras escribes, y un clic copia el valor HSLA.
¿La conversión de HSL a HSLA es exacta?
El cálculo es exacto y el resultado solo se redondea para mostrarlo, con suficientes decimales para volver al mismo color. Si el color no cabe en la gama de destino, PickShade te avisa y muestra el color más cercano que sí cabe.
¿Puedo obtener otros formatos a la vez?
Sí. Todos los demás formatos, incluidos OKLCH, Display P3, Tailwind, SwiftUI, Flutter y Android, aparecen bajo el resultado y se copian con un clic.
¿Este conversor es gratuito?
Sí. Es gratis, no necesita registro y funciona entero en tu navegador.