HEX a HSL: #ECFEFF
También conocido como: Tailwind cyan-50, Tailwind v3 cyan-50
Resultado
#ECFEFF → hsl(183 100% 96%)
Los valores se muestran con precisión completa, así que al convertir de vuelta obtienes exactamente #ecfeff. La forma redondeada es la que normalmente pegas en CSS.
Cálculo paso a paso
Cada número se calcula a partir de la entrada; no se consulta ninguna tabla.
1. RGB ÷ 255
R = 0.9255 G = 0.9961 B = 1.0000
2. max, min, Δ
max = 1.0000 min = 0.9255 Δ = max − min = 0.0745
3. L
L = (max + min) / 2 = 0.9627 = 96.27%
4. S
S = Δ / (1 − |2L − 1|) = 1.0000 = 100.00%
5. H
max is B → H = 60° × ((R − G) / Δ + 4) = 60° × ((0.9255 − 0.9961) / 0.0745 + 4) = 183.16°
6. HSL
hsl(183.16 100.00% 96.27%)
Todos los formatos
- HEX
- #ecfeff
- RGB
- rgb(236 254 255)
- RGB (legacy)
- rgb(236, 254, 255)
- HSL
- hsl(183.16 100.00% 96.27%) → hsl(183 100% 96%)
- HWB
- hwb(183 93% 0%)
- OKLCH
- oklch(0.984 0.019 200.9) · oklch(98.4% 0.019 200.9)
- OKLab
- oklab(0.984 -0.018 -0.007)
- Lab (D50)
- lab(98.34 -5.94 -2.61)
- LCH (D50)
- lch(98.34 6.49 203.69)
- Display P3
- color(display-p3 0.9385 0.9938 0.9985)
- Linear sRGB
- color(srgb-linear 0.8388 0.9911 1.0000)
Gamut: sRGB y Display P3
#ECFEFF es un color hexadecimal, así que está dentro de sRGB y, por tanto, de Display P3. Con esta luminosidad y este tono, sRGB llega a un croma de 0.019 y Display P3 a 0.020; este color usa el 100 % del croma sRGB disponible.
Fragmentos CSS
.element {
color: #ecfeff;
color: rgb(236 254 255);
color: hsl(183 100% 96%);
color: oklch(0.984 0.019 200.9);
}
/* Tailwind CSS v4 */
@theme {
--color-brand: oklch(0.984 0.019 200.9);
}
/* arbitrary values */
class="text-[#ecfeff] bg-[oklch(0.984_0.019_200.9)]"
/* wide-gamut screens */
@media (color-gamut: p3) {
.element { color: color(display-p3 0.9385 0.9938 0.9985); }
}
/* relative color syntax: 10% darker */
.element-dark { color: oklch(from #ecfeff calc(l - 0.1) c h); }Colores cercanos
Colores más próximos en las paletas de Tailwind y CSS (distancia OKLab).
- azure#F0FFFF
- teal-50#F0FDFA
- emerald-50#ECFDF5
- sky-50#F0F9FF
- mintcream#F5FFFA
- green-50#F0FDF4
- lightcyan#E0FFFF
- aliceblue#F0F8FF
Más claro y más oscuro, mismo tono y croma
- #F1FFFF · oklch(1.000 0.019 200.9) · ΔL +0.06
- #D8EAEB · oklch(0.924 0.019 200.9) · ΔL −0.06