Convertidor de hex a OKLCH

¿Qué es oklch()?

oklch() es la forma de escribir un color que trae CSS Color 4, y lo nombra con tres números con los que una persona puede razonar: la luminosidad en porcentaje, el croma —cuánto color tiene— y el tono como un ángulo en grados. oklch(62,8% 0,258 29,2) es el rojo que conoces como #ff0000.

Merece la pena cambiarse sobre todo por un motivo: la luminosidad es perceptual. Dos colores con la misma L se ven igual de claros, cosa que no pasa ni de lejos en HSL, donde hsl(60 100% 50%) es un amarillo cegador y hsl(240 100% 50%) un azul oscuro con la misma luminosidad declarada. Por eso una paleta hecha moviendo la L en OKLCH sale pareja y la misma paleta en HSL no.

El inconveniente es que un valor hex son tres números enteros y un valor oklch() son tres decimales, así que escribirlo implica decidir cuántos dígitos conservas. Esa decisión es invisible, no la etiqueta ningún convertidor que hayamos visto, y es justo donde el color cambia sin avisar.

Cómo usarlo

1. Escribe o pega en cualquiera de los dos campos. Hex a la izquierda, oklch() a la derecha; cada uno mueve al otro. El campo de oklch() acepta lo que acepta CSS, incluidos un croma en porcentaje y la palabra clave none.
2. Elige cuántos dígitos quieres. Tres ajustes: lo que se escribe a mano, un dígito más en cada componente y los números redondos que quedan bonitos. El valor se actualiza y los datos de debajo también.
3. Mira la fila de la ida y vuelta antes de copiar. Te dice si ese texto exacto vuelve a convertirse en el hex del que saliste, y por cuántas unidades de 255 falla si no.

Cuántos dígitos hacen falta

Esta es la medición sobre la que se construye la página. Tomando 1.893.376 colores sRGB —todos los rojos y uno de cada tres verdes y azules—, convirtiendo cada uno a oklch(), redondeándolo como se escribiría y volviendo:

Con la precisión que se escribe a mano —luminosidad con un decimal de porcentaje, croma con tres, tono con uno— vuelve exacto el 77,91 por ciento, y el peor caso se desvía 8 en un canal. Un dígito más en cada componente lo sube al 99,92 por ciento, con un peor caso de 1. Y la versión bonita, porcentaje y tono enteros con dos decimales de croma, sobrevive el 1,66 por ciento y puede desviarse 43 en un canal: un color visiblemente distinto.

Para comparar, la misma ida y vuelta a través del HSL que imprime cualquier herramienta de color sobrevive el 10,58 por ciento, que es la cifra que publica nuestra página de hex a HSL. O sea que oklch() con precisión normal es unas siete veces más fiel que la notación a la que sustituye, no menos: conviene saberlo, porque los decimales lo hacen parecer más quisquilloso de lo que es.

La regla práctica que sale de ahí: dos decimales en el porcentaje, cuatro en el croma y dos en el tono es prácticamente sin pérdidas, y cuesta tres caracteres.

Límites honestos

oklch() puede nombrar colores que tu pantalla no puede mostrar, cosa que el hex no. El croma no tiene tope fijo en la sintaxis, y la mayoría de los valores que puedes escribir quedan fuera de sRGB. Cuando eso pasa, CSS reduce el croma hasta que el color cabe, manteniendo luminosidad y tono: no recorta los canales rojo, verde y azul por separado, porque recortar gira el tono de forma visible. Esta página hace lo mismo y te avisa cuando ha tenido que hacerlo, y de cuánto croma ha cedido.

Todo aquí se mide contra sRGB. Una pantalla de gama amplia muestra más, y un navegador en una así renderizará perfectamente un oklch() que esta página llama no mostrable. Desde dentro de una página no hay forma de preguntar con precisión qué gama estás mirando, así que se enseña la respuesta conservadora.

La conversión usa las matrices estándar de Oklab, y no es aritmética exacta: es coma flotante pasando por una raíz cúbica y volviendo. Los errores quedan muy por debajo de una unidad de 255, y por eso las cifras de arriba las domina el redondeo que elijas y no la conversión.

Por último, el soporte de oklch() en los navegadores es amplio pero no universal, y el patrón sensato sigue siendo declarar el hex y después el oklch(), para que los navegadores viejos se queden con el primero y los nuevos con el segundo. El hex que te da esta página es exactamente ese respaldo.

¿Por qué es gratis?

La conversión se ejecuta en tu navegador, en unas pocas líneas de aritmética. No hay servidor de por medio, así que no hay nada que cobrar ni cuenta que crear.

No se sube nada y no se guarda nada. Recarga la página y habrá olvidado tu color.