Conversor de color OKLCH
Pega un color en cualquier formato CSS y obtén sus valores OKLCH, OKLab, CIE Lab y LCH, además de HEX, RGB, HSL y color(display-p3). La comprobación de gama te indica si el color cabe en sRGB o en Display P3 y te da un HEX alternativo con croma reducido cuando no cabe.
Última actualización:
HEX, rgb(), hsl(), hsv(), oklch(), oklab(), lab(), lch(), color(srgb|display-p3 …)
Cómo usar Conversor de color OKLCH
- Introduce un color en cualquier formato CSS: #2F6B4F, rgb(47 107 79), hsl(152 39% 30%), oklch(55% 0.2 250) y más.
- Elige la precisión que quieres para los valores de salida.
- Revisa las insignias de gama. Dentro de sRGB significa que el color se ve igual en todas las pantallas; fuera significa que necesita una alternativa.
- Copia el valor que necesites, o la alternativa CSS de dos líneas para colores de gama amplia.
- Crea una paleta haciendo clic en una muestra de la escala de luminosidad perceptual para copiar su HEX.
Fórmula de RGB a OKLab y OKLCH
El conversor sigue la definición de OKLab de Björn Ottosson y CSS Color Module Level 4:
- Linealizar sRGB: clin = c / 12.92 si c ≤ 0.04045; si no, ((c + 0.055) / 1.055)2.4.
- A LMS: l = 0.4122 R + 0.5363 G + 0.0514 B, m = 0.2119 R + 0.6807 G + 0.1074 B, s = 0.0883 R + 0.2817 G + 0.6300 B.
- No linealidad: l′ = ∛l, m′ = ∛m, s′ = ∛s.
- A OKLab: L = 0.2105 l′ + 0.7936 m′ − 0.0041 s′, a = 1.9780 l′ − 2.4286 m′ + 0.4506 s′, b = 0.0259 l′ + 0.7828 m′ − 0.8087 s′.
- A OKLCH: C = √(a² + b²), H = atan2(b, a) en grados (0-360).
CIE Lab y LCH se calculan a partir de XYZ adaptado al punto blanco D50 con la transformación de Bradford, igual que las funciones CSS lab() y lch().
Colores de referencia en OKLCH
| Color | HEX | OKLCH | CIE Lab (D50) |
|---|---|---|---|
| Blanco | #FFFFFF | oklch(100% 0 0) | lab(100% 0 0) |
| Negro | #000000 | oklch(0% 0 0) | lab(0% 0 0) |
| Rojo | #FF0000 | oklch(62.8% 0.258 29.2) | lab(54.29% 80.8 69.89) |
| Lima | #00FF00 | oklch(86.6% 0.295 142.5) | lab(87.82% -79.27 80.99) |
| Azul | #0000FF | oklch(45.2% 0.313 264.1) | lab(29.57% 68.29 -112.03) |
| Amarillo | #FFFF00 | oklch(96.8% 0.211 109.8) | lab(97.61% -15.75 93.39) |
| Gris medio | #808080 | oklch(60% 0 0) | lab(53.59% 0 0) |
Por qué los diseñadores se pasan a OKLCH
- Luminosidad predecible: dos colores con la misma L se ven igual de claros, lo que facilita crear escalas de contraste y de temas en comparación con HSL.
- Tono estable: aclarar u oscurecer mantiene el tono, sin la deriva de azul a morado de CIE LCH.
- Gama amplia: la misma sintaxis llega a los colores Display P3 y Rec. 2020 en las pantallas que los admiten.
Preguntas frecuentes
¿Qué es OKLCH?
OKLCH es la forma polar del espacio de color OKLab creado por Björn Ottosson en 2020. L es la luminosidad percibida de 0 a 100%, C es el croma (viveza del color, de 0 a unos 0.37 para colores reales) y H es el ángulo de tono en grados. Como es perceptualmente uniforme, cambiar L en la misma cantidad parece el mismo paso de luminosidad para cualquier tono.
¿Cómo convierto HEX a OKLCH?
Convierte el HEX a sRGB, elimina la curva gamma para obtener RGB lineal, multiplica por la primera matriz de Ottosson para obtener los valores de conos LMS, saca la raíz cúbica, multiplica por la segunda matriz para obtener OKLab L, a, b y, por último, calcula C = √(a² + b²) y h = atan2(b, a).
¿Puedo usar oklch() en CSS?
Sí. oklch() es compatible con todas las versiones actuales de Chrome, Edge, Firefox y Safari desde 2023. Para navegadores antiguos, declara primero una alternativa HEX o rgb() y el valor oklch() en la línea siguiente.
¿Qué significa fuera de gama?
OKLCH puede describir colores que una pantalla no puede mostrar. Si un color está fuera de sRGB, un monitor estándar no puede mostrarlo; entonces los navegadores lo ajustan al color visible más cercano. Display P3, usado por la mayoría de los teléfonos y Mac recientes, es aproximadamente un 25% más amplio que sRGB, así que algunos colores caben en P3 pero no en sRGB.
¿Cuál es la diferencia entre OKLCH y CIE LCH?
Ambos usan luminosidad, croma y tono. CIE LCH se basa en CIELAB (1976) y tiene problemas conocidos, por ejemplo que el azul tiende al morado al aclararlo. OKLCH corrige esos cambios de tono y tiene una luminosidad más uniforme, lo que lo hace mejor para generar escalas de color y paletas accesibles.
¿Por qué el HEX ajustado a la gama se ve más apagado?
Para que un color fuera de gama quepa en sRGB, el conversor mantiene su luminosidad y su tono y solo reduce el croma, que es el método recomendado por CSS Color Module Level 4. También se muestra un recorte simple de cada canal RGB; conserva más saturación pero puede cambiar el tono.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.