Conversor de HSLA a Display P3
Pega un valor HSLA y obtén Display P3 al instante. Cualquier otro formato también sirve.
Interpretado como HSL
El mismo color sin transparencia, en Display P3 sólido
Ajustar el color
Todos los demás formatos
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 HSLA a Display P3
Sobre HSLA y Display P3
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().
Display P3 es la gama amplia de las pantallas modernas de Apple y de muchos móviles. Abarca cerca de un 25 % más de colores que sRGB y se escribe color(display-p3 r g b).
Cómo funciona la conversión
Leemos el valor HSLA, lo pasamos a CIE XYZ con las matrices de la especificación CSS Color 4 y de ahí a Display P3. 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 HSLA a Display P3?
Pega o escribe un valor HSLA en el campo de arriba. PickShade lo convierte con las fórmulas de CSS Color 4 mientras escribes, y un clic copia el valor Display P3.
¿La conversión de HSLA a Display P3 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.