Conversor de colores OKLCH.

Escribe un color como HEX, rgb(), hsl() u oklch() y obtenlo en los cuatro formatos, listo para copiar. Si un color OKLCH queda fuera de lo que pueden mostrar las pantallas sRGB, la página lo avisa. Funciona en tu navegador, así que nada de lo que escribes se sube.

Cualquier color CSS

Dentro de la gama sRGB.

HEX: #3A81F6
RGB: rgb(58 129 246)
HSL: hsl(217 91% 60%)
OKLCH: oklch(0.62 0.19 260)

Funciona en tu navegador. Nada de lo que añadas aquí se sube ni se guarda.

Cómo convertir un color a OKLCH

Escribe un color en cualquiera de estas formas: HEX (#3B82F6, #38f o sin el #), rgb(59 130 246) o rgb(59, 130, 246), hsl(217 91% 60%) u oklch(0.62 0.19 260). Las comas son opcionales y los porcentajes funcionan donde CSS los permite. También puedes usar el selector de color junto al campo, que lo rellena con el color como valor oklch(). La página empieza con oklch(0.62 0.19 260).
Lee los cuatro formatos: HEX, RGB, HSL y OKLCH, con una muestra del color a su lado. Si el campo no se puede leer, se pone en rojo y la página indica qué formas acepta.
Consulta el mensaje de gama bajo el campo. Dice que el color está dentro de la gama sRGB o avisa de que queda fuera (más abajo, los detalles).
Copia el formato que necesites con su botón Copiar.

Los formatos se escriben como lo hacen el CSS actual y los frameworks: rgb(59 130 246) con espacios, hsl(217 91% 60%) en números enteros y oklch(0.623 0.188 259.815) con tres decimales, como escriben los suyos shadcn/ui y Tailwind v4. Un gris no tiene croma ni tono, así que sale como oklch(0.6 0 0).

Solo lee HEX, rgb(), hsl() y oklch(). Los nombres de color de CSS como red y otras funciones como color(display-p3 …) no se admiten, y un valor de transparencia, como en rgb(59 130 246 / 50%), se ignora.

Colores fuera de sRGB

OKLCH puede describir colores que sRGB, el espacio de color en el que se basan HEX, rgb() y hsl(), no puede mostrar. Prueba oklch(0.7 0.4 150), un verde muy vivo: la página avisa de que queda fuera de la gama sRGB, y los demás formatos muestran el color más cercano que sRGB puede mostrar, aquí #00BE58. Ese color se obtiene manteniendo la luminosidad y el tono y reduciendo el croma hasta que cabe. La fila de OKLCH y la muestra siguen usando el valor OKLCH que escribiste, así que una pantalla de gama amplia puede mostrar más de él que el HEX.

Un color que escribes como HEX, rgb() o hsl() siempre está dentro de sRGB, así que nunca activa el aviso.

Úsalo con Codex

Codex copia el formato de color que ve. En un proyecto con Tailwind v4 o shadcn/ui ese formato es OKLCH, así que dale el valor oklch() de esta página en lugar de un código HEX y pídele que se mantenga en ese formato. Una ventaja de OKLCH es que Codex puede cambiar una sola cosa a la vez: reducir solo la luminosidad da una versión más oscura del mismo color.

Mantener los colores en OKLCH

Nuestro color de marca es [oklch(0.62 0.19 260)]. En globals.css, asígnalo a --primary. Para los estados hover y active, crea versiones más oscuras reduciendo solo la luminosidad, en 0.05 y 0.1, y mantén el croma y el tono. Escribe cada color en oklch() como el resto del archivo y no añadas valores HEX ni hsl().

Preguntas frecuentes

¿Es gratis?

Sí. Es gratis, no requiere registro y no hay límite de colores que puedas convertir.

¿Se sube lo que escribo?

No. La conversión ocurre en tu navegador y nada de lo que escribes se envía ni se guarda. El sitio solo cuenta que se usó la herramienta, nunca los colores.

¿Cómo convierte?

Convierte pasando por sRGB lineal con las fórmulas de OKLab publicadas por Björn Ottosson y luego transforma OKLab en OKLCH, con croma y tono. HEX, rgb() y hsl() se muestran en números enteros y OKLCH con tres decimales, así que convertir un color a HEX y de vuelta puede cambiar los últimos decimales de su valor OKLCH.

¿Por qué shadcn/ui y Tailwind v4 usan OKLCH?

La paleta predeterminada de Tailwind v4 está escrita en OKLCH, y shadcn/ui pasó las variables de su tema de HSL a OKLCH cuando se pasó a Tailwind v4. Hay tres motivos. La luminosidad en OKLCH se acerca a lo clara que parece un color, así que dos colores con la misma luminosidad se ven igual de claros, algo que no ocurre en HSL: un amarillo y un azul con un 50% de luminosidad HSL se ven muy distintos. El tono también se ve más estable al cambiar la luminosidad o el croma, así que una fila de tonalidades de clara a oscura se sigue leyendo como un solo color. Y OKLCH puede describir colores más allá de sRGB, para las pantallas que pueden mostrarlos, algo que HEX, rgb() y hsl() no pueden.