Convertidor RGB a OKLCH
Convierte RGB a OKLCH — el espacio de color perceptual más moderno, adoptado por CSS Color Level 4.
Valores RGB
RGB(108, 92, 231)
OKLCH(0.53, 0.21, 270°)
L: 0.53C: 0.21H: 270°
CSS: oklch(53% 0.21 270)¿Qué es OKLCH?
OKLCH (2020) es un espacio de color cilíndrico basado en OKLAB. Es la forma más intuitiva y perceptualmente precisa de definir colores en CSS moderno.
| Eje | Rango | Significado |
|---|---|---|
| L | 0 → 1 | Luminosidad perceptual (como lightness en HSL, pero preciso) |
| C | 0 → ~0.4 | Crominancia (saturación real, no distorsionada) |
| H | 0° → 360° | Tono (hue), perceptualmente uniforme |
OKLCH vs HSL
| Propiedad | HSL | OKLCH |
|---|---|---|
| Uniformidad | ❌ No uniforme | ✅ Perceptualmente uniforme |
| Gamut CSS | Solo sRGB | sRGB + P3 + Rec.2020 |
| Paletas accesibles | Difícil | Natural (L constante = contraste constante) |
| Soporte | Universal | Chrome 111+, Safari 15.4+, FF 113+ |
Preguntas Frecuentes
¿OKLCH es mejor que HSL?
Sí, para generar paletas. OKLCH es perceptualmente uniforme: cambiar la luminosidad 10% produce el mismo efecto visual en cualquier tono. HSL no tiene esta propiedad.
¿Puedo usar OKLCH en CSS?
Sí:
oklch(70% 0.15 240). Compatible con Chrome 111+, Safari 15.4+, Firefox 113+. Es el futuro del color en CSS.¿OKLCH alcanza Display P3?
Sí. OKLCH puede representar colores fuera del gamut sRGB, incluyendo Display P3 y Rec.2020. En un monitor P3, CSS
oklch() mostrará esos colores.¿Qué significan L, C, H?
L (0-1) = Luminosidad perceptual. C (0-0.4+) = Crominancia (saturación). H (0-360°) = Tono (hue), como en HSL pero perceptualmente correcto.
¿Por qué "OK" en OKLCH?
OKLCH se basa en OKLAB, desarrollado por Björn Ottosson en 2020. "OK" significa que es una mejora de LAB: más uniforme en los azules y con mejor linealidad en baja luminosidad.