HEX a OKLCH: #F0E68C
También conocido como: CSS khaki
Resultado
#F0E68C → oklch(0.913 0.112 102.8)
Los valores se muestran con precisión completa, así que al convertir de vuelta obtienes exactamente #f0e68c. 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. sRGB → linear
R: 240/255 = 0.94118 → 0.871367 (((x + 0.055) / 1.055)^2.4) G: 230/255 = 0.90196 → 0.791298 (((x + 0.055) / 1.055)^2.4) B: 140/255 = 0.54902 → 0.262251 (((x + 0.055) / 1.055)^2.4)
2. linear sRGB → LMS
l = 0.4122·R + 0.5363·G + 0.0514·B = 0.797087 m = 0.2119·R + 0.6807·G + 0.1074·B = 0.751447 s = 0.0883·R + 0.2817·G + 0.6300·B = 0.465080
3. cube root
l′ = ∛0.797087 = 0.927190 m′ = ∛0.751447 = 0.909144 s′ = ∛0.465080 = 0.774775
4. LMS′ → Oklab
L = 0.2105·l′ + 0.7936·m′ − 0.0041·s′ = 0.91349 a = 1.9780·l′ − 2.4286·m′ + 0.4506·s′ = -0.02485 b = 0.0259·l′ + 0.7828·m′ − 0.8087·s′ = 0.10913
5. Oklab → OKLCH
C = √(a² + b²) = 0.11192 H = atan2(b, a) = 102.829° L = 0.91349
6. OKLCH
oklch(0.91349 0.11192 102.829) rounded: oklch(0.913 0.112 102.8)
Todos los formatos
- HEX
- #f0e68c
- RGB
- rgb(240 230 140)
- RGB (legacy)
- rgb(240, 230, 140)
- HSL
- hsl(54.00 76.92% 74.51%) → hsl(54 77% 75%)
- HWB
- hwb(54 55% 6%)
- OKLCH
- oklch(0.913 0.112 102.8) · oklch(91.3% 0.112 102.8)
- OKLab
- oklab(0.913 -0.025 0.109)
- Lab (D50)
- lab(90.64 -5.60 45.00)
- LCH (D50)
- lch(90.64 45.34 97.09)
- Display P3
- color(display-p3 0.9344 0.9033 0.5935)
- Linear sRGB
- color(srgb-linear 0.8714 0.7913 0.2623)
Gamut: sRGB y Display P3
#F0E68C 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.192 y Display P3 a 0.222; este color usa el 58 % del croma sRGB disponible.
Fragmentos CSS
.element {
color: #f0e68c;
color: rgb(240 230 140);
color: hsl(54 77% 75%);
color: oklch(0.913 0.112 102.8);
}
/* Tailwind CSS v4 */
@theme {
--color-brand: oklch(0.913 0.112 102.8);
}
/* arbitrary values */
class="text-[#f0e68c] bg-[oklch(0.913_0.112_102.8)]"
/* wide-gamut screens */
@media (color-gamut: p3) {
.element { color: color(display-p3 0.9344 0.9033 0.5935); }
}
/* relative color syntax: 10% darker */
.element-dark { color: oklch(from #f0e68c calc(l - 0.1) c h); }Colores cercanos
Colores más próximos en las paletas de Tailwind y CSS (distancia OKLab).
- v3 amber-200#FDE68A
- amber-200#FEE685
- palegoldenrod#EEE8AA
- v3 yellow-200#FEF08A
- yellow-200#FFF085
- v3 lime-200#D9F99D
- lime-200#D8F999
- v3 yellow-300#FDE047
Más claro y más oscuro, mismo tono y croma
- #FFFA9F · oklch(0.973 0.112 102.8) · ΔL +0.06
- #DCD279 · oklch(0.853 0.112 102.8) · ΔL −0.06