OKLCH para HEX: #F8F8FF
Também conhecida como: CSS ghostwhite
Resultado
oklch(0.98112 0.00927 286.228) → #F8F8FF
Os valores aparecem com precisão total, então converter de volta dá exatamente #f8f8ff. A forma arredondada é a que normalmente se cola no CSS.
Cálculo passo a passo
Cada número é calculado a partir da entrada; nada é consultado em tabelas.
1. input
oklch(0.98112 0.00927 286.228)
2. OKLCH → Oklab
a = C·cos H = 0.00259 b = C·sin H = -0.00890
3. Oklab → LMS′
l′ = L + 0.3963·a + 0.2158·b = 0.980226 m′ = L − 0.1056·a − 0.0639·b = 0.981415 s′ = L − 0.0895·a − 1.2915·b = 0.992383
4. cube
l = 0.980226³ = 0.941843 m = 0.981415³ = 0.945274 s = 0.992383³ = 0.977323
5. LMS → linear sRGB
R = 4.0767·l − 3.3077·m + 0.2310·s = 0.938688 G = −1.2684·l + 2.6098·m − 0.3413·s = 0.938688 B = −0.0042·l − 0.7034·m + 1.7076·s = 1.000016
6. linear → sRGB, × 255
R = 0.97255 × 255 = 248.00 → 248 G = 0.97255 × 255 = 248.00 → 248 B = 1.00000 × 255 = 255.00 → 255
7. RGB → HEX
#F8F8FF
Todos os formatos
- HEX
- #f8f8ff
- RGB
- rgb(248 248 255)
- RGB (legacy)
- rgb(248, 248, 255)
- HSL
- hsl(240.00 100.00% 98.63%) → hsl(240 100% 99%)
- HWB
- hwb(240 97% 0%)
- OKLCH
- oklch(0.981 0.009 286.2) · oklch(98.1% 0.009 286.2)
- OKLab
- oklab(0.981 0.003 -0.009)
- Lab (D50)
- lab(97.73 0.93 -3.36)
- LCH (D50)
- lch(97.73 3.49 285.47)
- Display P3
- color(display-p3 0.9725 0.9725 0.9976)
- Linear sRGB
- color(srgb-linear 0.9387 0.9387 1.0000)
Gamut: sRGB e Display P3
#F8F8FF é uma cor hexadecimal, portanto está dentro do sRGB e, por isso, do Display P3. Com esta luminosidade e matiz, o sRGB chega a um croma de 0.009 e o Display P3 a 0.010; esta cor usa 100% do croma sRGB disponível.
Trechos de CSS
.element {
color: #f8f8ff;
color: rgb(248 248 255);
color: hsl(240 100% 99%);
color: oklch(0.981 0.009 286.2);
}
/* Tailwind CSS v4 */
@theme {
--color-brand: oklch(0.981 0.009 286.2);
}
/* arbitrary values */
class="text-[#f8f8ff] bg-[oklch(0.981_0.009_286.2)]"
/* wide-gamut screens */
@media (color-gamut: p3) {
.element { color: color(display-p3 0.9725 0.9725 0.9976); }
}
/* relative color syntax: 10% darker */
.element-dark { color: oklch(from #f8f8ff calc(l - 0.1) c h); }Cores próximas
Cores mais próximas nas paletas do Tailwind e do CSS (distância OKLab).
- slate-50#F8FAFC
- purple-50#FAF5FF
- gray-50#F9FAFB
- mauve-50#FAFAFA
- aliceblue#F0F8FF
- sky-50#F0F9FF
- mist-50#F9FBFB
- stone-50#FAFAF9
Mais claro e mais escuro, mesmo matiz e croma
- #FEFEFF · oklch(1.000 0.009 286.2) · ΔL +0.06
- #E4E4EB · oklch(0.921 0.009 286.2) · ΔL −0.06