HEX a OKLCH: #4682B4
También conocido como: CSS steelblue
Resultado
#4682B4 → oklch(0.588 0.099 245.7)
Los valores se muestran con precisión completa, así que al convertir de vuelta obtienes exactamente #4682b4. 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: 70/255 = 0.27451 → 0.061246 (((x + 0.055) / 1.055)^2.4) G: 130/255 = 0.50980 → 0.223228 (((x + 0.055) / 1.055)^2.4) B: 180/255 = 0.70588 → 0.456411 (((x + 0.055) / 1.055)^2.4)
2. linear sRGB → LMS
l = 0.4122·R + 0.5363·G + 0.0514·B = 0.168452 m = 0.2119·R + 0.6807·G + 0.1074·B = 0.213947 s = 0.0883·R + 0.2817·G + 0.6300·B = 0.355825
3. cube root
l′ = ∛0.168452 = 0.552279 m′ = ∛0.213947 = 0.598093 s′ = ∛0.355825 = 0.708618
4. LMS′ → Oklab
L = 0.2105·l′ + 0.7936·m′ − 0.0041·s′ = 0.58800 a = 1.9780·l′ − 2.4286·m′ + 0.4506·s′ = -0.04082 b = 0.0259·l′ + 0.7828·m′ − 0.8087·s′ = -0.09057
5. Oklab → OKLCH
C = √(a² + b²) = 0.09934 H = atan2(b, a) = 245.739° L = 0.58800
6. OKLCH
oklch(0.58800 0.09934 245.739) rounded: oklch(0.588 0.099 245.7)
Todos los formatos
- HEX
- #4682b4
- RGB
- rgb(70 130 180)
- RGB (legacy)
- rgb(70, 130, 180)
- HSL
- hsl(207.27 44.00% 49.02%) → hsl(207 44% 49%)
- HWB
- hwb(207 27% 29%)
- OKLCH
- oklch(0.588 0.099 245.7) · oklch(58.8% 0.099 245.7)
- OKLab
- oklab(0.588 -0.041 -0.091)
- Lab (D50)
- lab(51.99 -8.36 -32.83)
- LCH (D50)
- lch(51.99 33.88 255.71)
- Display P3
- color(display-p3 0.3318 0.5041 0.6892)
- Linear sRGB
- color(srgb-linear 0.0612 0.2232 0.4564)
Gamut: sRGB y Display P3
#4682B4 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.150 y Display P3 a 0.195; este color usa el 66 % del croma sRGB disponible.
Fragmentos CSS
.element {
color: #4682b4;
color: rgb(70 130 180);
color: hsl(207 44% 49%);
color: oklch(0.588 0.099 245.7);
}
/* Tailwind CSS v4 */
@theme {
--color-brand: oklch(0.588 0.099 245.7);
}
/* arbitrary values */
class="text-[#4682b4] bg-[oklch(0.588_0.099_245.7)]"
/* wide-gamut screens */
@media (color-gamut: p3) {
.element { color: color(display-p3 0.3318 0.5041 0.6892); }
}
/* relative color syntax: 10% darker */
.element-dark { color: oklch(from #4682b4 calc(l - 0.1) c h); }Colores cercanos
Colores más próximos en las paletas de Tailwind y CSS (distancia OKLab).
- v3 sky-600#0284C7
- cyan-600#0092B8
- v3 cyan-600#0891B2
- sky-600#0084D1
- slate-500#62748E
- slategray#708090
- v3 slate-500#64748B
- cyan-700#007595
Más claro y más oscuro, mismo tono y croma
- #5894C7 · oklch(0.648 0.099 245.7) · ΔL +0.06
- #3470A1 · oklch(0.528 0.099 245.7) · ΔL −0.06