Convertidor HEX a OKLCH

¿Qué es un convertidor HEX a OKLCH?

// sRGB hex → OKLCH per W3C CSS Color 4 + Ottosson 2020
// References: https://www.w3.org/TR/css-color-4/#color-conversion-code
//             https://bottosson.github.io/posts/oklab/
// Worked example: #3b82f6 (Tailwind blue-500) → oklch(0.629 0.193 263.4)
function hexToOklch(hex) {
  const h = hex.trim().replace(/^#/, '');
  const srgb = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
  // sRGB → linear-sRGB (CSS Color 4 §11.2 piecewise gamma)
  const lin = srgb.map(v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
  const [lr, lg, lb] = lin;
  // linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
  const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
  const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
  const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;
  // XYZ D65 → LMS (Ottosson 2020), cube-root, → OKLAB
  const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
  const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
  const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
  const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
  const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
  const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
  // OKLAB → OKLCH (Cartesian to polar)
  const C = Math.sqrt(a * a + b * b);
  const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
}
console.log(hexToOklch('#3b82f6')); // → oklch(0.629 0.193 263.4)

Características principales

Alternativas al convertidor HEX a OKLCH

Ejemplos de HEX a OKLCH

#3b82f6

#FF5733

#FF1744

#0f172a

#3b82f6

Conversiones HEX → OKLCH comunes (Tailwind v4)

Tabla de referencia de 10 tonos medios populares de la paleta por defecto de Tailwind v4 con sus equivalentes HEX y OKLCH. Los valores coinciden con la precisión publicada de la paleta de Tailwind v4 (tres decimales en L y C, entero o un decimal en H).

Cómo usar el convertidor HEX a OKLCH

1. 1

   Pegue un código hex en el campo HEX

   Suelte cualquier valor hex en la entrada HEX — con o sin el `#` inicial, en abreviación de 3 dígitos (`#F73`), forma completa de 6 dígitos (`#3b82f6`), abreviación alfa de 4 dígitos (`#F738`), o forma completa alfa de 8 dígitos (`#FF573380`). El parser normaliza las cinco formas de entrada en el mismo color interno antes de derivar OKLCH. La capitalización no importa (`#3b82f6` y `#3B82F6` se analizan de forma idéntica). Los caracteres inválidos o conteos de dígitos incorrectos producen un error discreto en línea; un hex válido actualiza cada otro campo de formato en tiempo real, incluido OKLCH.

2. 2

   Lea la tripleta OKLCH del campo OKLCH

   El campo OKLCH expone el valor en la forma moderna de CSS Color 4: `oklch(0.629 0.193 263.4)` para un color opaco, `oklch(0.629 0.193 263.4 / 0.5)` para uno con alfa. L se redondea a tres decimales (coincide con la precisión publicada de Tailwind v4), C a tres decimales, H a un decimal de grado. La fuente de verdad OKLCH interna de la herramienta significa que la precisión flotante subyacente se preserva a través de cada otro campo — los viajes de ida y vuelta de regreso a hex se mantienen bit-estables, a diferencia de los convertidores heredados con pivote HSL que derivan en uno o dos grados por viaje.

3. 3

   Haga clic en Copiar para tomar la cadena OKLCH

   Cada tarjeta de formato tiene un botón Copiar a la derecha. Un clic y el valor aterriza en su portapapeles — la etiqueta del botón cambia brevemente a "¡Copiado!" para que lo sepa. La cadena copiada es la sintaxis canónica de CSS Color 4 (`oklch(0.629 0.193 263.4)`), lista para soltar en un bloque `@theme` de Tailwind v4 o en una definición de variable CSS de shadcn/ui. Para salida específica de plataforma (propiedad personalizada CSS, token de Tailwind v4, SwiftUI, Compose, Flutter), use la sección Copiar como código debajo del selector — esos fragmentos emiten el formato que cada plataforma espera nativamente.

4. 4

   Compruebe las insignias de gama Display P3 / Rec.2020

   Tres insignias de gama (sRGB, Display P3, Rec.2020) muestran si el color actual cae dentro del rango reproducible de cada espacio. Si la insignia sRGB se vuelve roja pero P3 está en verde, el color es un OKLCH de gama amplia que se renderizará saturado en hardware Apple (iPhone, iPad, MacBook desde 2017+) pero se desaturará en un monitor heredado de 24 bits. El botón **Ajustar a sRGB** usa reducción binaria de chroma (algoritmo informativo de CSS Color 4 §13) para reducir el color dentro de sRGB mientras preserva L y H, produciendo un fallback hex que puede enviar vía `@supports not (color: oklch(0 0 0))`.

5. 5

   También visibles: RGB, HSL, OKLAB, HSV, HWB, CMYK, color con nombre

   El mismo hex que pega también ilumina los otros ocho campos de formato — RGB para llamadas de canvas y hardware, HSL para variables CSS heredadas, OKLAB para matemáticas de paletas y matrices de daltonismo, HSV y HWB para flujos de selector de color de diseñadores, CMYK para estimaciones de imprenta, y el color CSS con nombre más cercano para prosa de documentación. Nunca está atrapado en hex → OKLCH solamente. El selector (cuadrado SL + deslizador de matiz + deslizador de alfa) impulsa los nueve simultáneamente, y en navegadores Chromium el botón EyeDropper muestrea cualquier píxel en pantalla, incluso fuera del navegador.

Errores comunes de HEX / OKLCH

Establecer OKLCH C = 0.3 esperando "30% de saturación":
oklch(0.7 0.3 250) → puede exceder la gama sRGB para azules
El color de gama amplia se renderiza desaturado en pantallas heredadas.

Trate C como chroma absoluto, compruebe las insignias de gama:
oklch(0.7 0.15 250) → cómodamente en sRGB para este par L+H
Use las insignias para encontrar el C máximo que cabe en la gama objetivo.

Copiar porcentajes de L de HSL directamente en OKLCH:
hsl(220 50% 30%) portado como oklch(0.30 0.10 220)
Los dos colores se ven notablemente distintos en brillo.

Re-derive OKLCH desde el hex original, no porte HSL:
fuente hex → conversión OKLCH → oklch(0.34 0.08 254)
La L perceptual se mantiene correcta; la paleta se siente uniforme.

Enviar oklch(0.7 0.4 30) sin comprobar la gama sRGB:
Las pantallas P3 renderizan rojo saturado; las pantallas sRGB renderizan desaturado
El color de marca se ve inconsistente entre el hardware de usuario.

Compruebe la insignia de gama sRGB, Ajustar a sRGB si es necesario, en capas con @supports:
@supports (color: oklch(0 0 0)) { --primary: oklch(0.7 0.4 30); }
@supports not (color: oklch(0 0 0)) { --primary: #ef6b50; }
El hardware P3 obtiene el valor de gama amplia; el hardware sRGB obtiene el fallback ajustado.

Definir el color de marca solo en OKLCH:
:root { --primary: oklch(0.629 0.193 263.4); }
IE 11 y Safari antiguo de iOS no renderizan ningún color.

Capa con @supports para fallback con elegancia:
:root { --primary: #3b82f6; }
@supports (color: oklch(0 0 0)) { :root { --primary: oklch(0.629 0.193 263.4); } }
Los navegadores modernos obtienen OKLCH; los navegadores heredados obtienen el fallback hex.

Sustituir lch() por oklch() esperando el mismo resultado:
lch(60% 50 240) ≠ oklch(0.6 0.15 240) — colores completamente distintos
Copiado y pegado entre espacios, el valor está silenciosamente equivocado.

Elija un espacio y manténgase en él:
oklch(0.629 0.193 263.4) para sistemas de diseño modernos
o lch(60% 50 240) — pero no cambie nombres de función sin re-convertir

Quién usa HEX a OKLCH

Desarrolladores frontend migrando a tokens OKLCH de Tailwind v4

Tailwind v4 estandarizó OKLCH para su paleta por defecto en enero de 2025. Migrar un código de v3 con colores de marca basados en hex significa convertir cada hex a OKLCH y soltar el resultado en el nuevo bloque `@theme`. Pegue cada hex aquí, copie el valor `oklch()`, defina `--color-primary: oklch(0.629 0.193 263.4)` y amigos. Las insignias de gama en vivo señalan cualquier color que exceda sRGB para que pueda decidir si mantener el valor de gama amplia para usuarios de Display P3 o ajustar a sRGB.

Autores de temas shadcn/ui construyendo paletas personalizadas

El tema de variables CSS de shadcn/ui usa OKLCH para cada token (`--background`, `--foreground`, `--primary`, etc.). Los temas personalizados se derivan de un hex de marca base convirtiendo a OKLCH y luego barriendo L para las variantes claro/oscuro. Pegue el hex de marca, lea la tripleta OKLCH, construya el resto del tema escalonando L mientras mantiene C y H fijos. Coincide exactamente con el flujo canónico de shadcn.

Autores de sistemas de diseño generando rampas perceptualmente uniformes

Genere una rampa 50/100/200/.../900 escalonando el canal L en incrementos OKLCH iguales mientras mantiene C y H fijos. La brecha visual entre paradas adyacentes se ve idéntica a través de cada matiz — lo que una paleta de colores de marca realmente necesita. Tailwind v4 usa exactamente esta construcción para su paleta por defecto, y shadcn/ui la refleja. Pegue cada hex de marca, lea el OKLCH, genere la rampa algorítmicamente o vía el panel de Tintes claros/Matices oscuros/Tonos debajo del selector.

Ingenieros de accesibilidad verificando contraste en espacio OKLCH

El contraste WCAG 2.1 y APCA ambos reportan contra el color sRGB resuelto, no contra la tripleta OKLCH — pero conocer la L OKLCH de un color de marca hace que el ajuste de contraste sea predecible: suba L en 0.1 para pasar AA contra blanco, baje L en 0.1 para pasar AA contra negro. La vista simultánea OKLCH + WCAG + APCA hace visible la relación. Pegue el hex de marca, observe las insignias de contraste, ajuste L en OKLCH (más predecible que HSL) hasta que el par pase ambas métricas.

Desarrolladores web construyendo tokens de color de gama amplia para pantallas modernas

La mayoría de los dispositivos Apple desde 2017 (y muchos dispositivos Android modernos) renderizan Display P3 nativamente. Definir colores de acento de marca en OKLCH le permite direccionar rojos y verdes saturados solo de P3 que ningún código hex puede codificar. Pegue un hex existente para leer su OKLCH, luego empuje el canal C por encima del techo sRGB para reclamar la saturación extra de P3. Las insignias de gama confirman que el nuevo valor cabe en P3 (y hace fallback con elegancia en pantallas solo sRGB vía compresión de chroma del navegador).

Educadores enseñando luminosidad perceptual vs geométrica

La vista simultánea OKLCH + HSL hace obvia la diferencia entre luminosidad perceptual y geométrica. Pegue un verde saturado y un azul saturado a la misma L=50% de HSL; los valores L de OKLCH difieren notablemente porque OKLCH mide el brillo realmente percibido. Arrastre el deslizador de matiz de HSL y observe la L de OKLCH oscilar mientras mantiene la L de HSL constante — la curva es la peculiaridad de gamma visualizada. Una demostración lista para el aula de por qué los sistemas de diseño migraron a OKLCH.

Mantenedores de código abierto modernizando documentación de tokens

Los documentos de sistemas de diseño más antiguos típicamente listan los colores de marca solo como códigos hex. Modernizar a OKLCH significa mostrar el mismo color en ambos espacios — el hex para compatibilidad de bloques de código, el OKLCH para la tabla de especificación y la definición de token moderna. Pegue cada hex, copie la salida OKLCH, actualice los documentos. El hash de URL compartible también permite a los colaboradores enlazar al color exacto en discusión en una issue de GitHub sin ambigüedad.

Matemáticas y canalización de HEX a OKLCH

HEX → OKLCH es una canalización de 7 pasos

La conversión enruta a través de cinco representaciones intermedias: hex → sRGB entero → sRGB normalizado (0-1) → linear-sRGB (gamma descodificada) → CIE XYZ D65 → OKLAB → OKLCH. Cada paso es una matriz o función a trozos bien definida de una fuente primaria. La herramienta ejecuta la canalización completa en cada pulsación de tecla; las matemáticas son lo suficientemente rápidas (microsegundos) que no se necesita debounce. Exponer la tupla RGB intermedia junto a OKLCH significa que puede depurar un valor OKLCH inesperado inspeccionando los canales RGB.

Función de gamma de CSS Color 4 §11.2

La conversión sRGB → linear-sRGB usa la función a trozos de CSS Color 4 §11.2: `v ≤ 0.04045 ? v/12.92 : ((v + 0.055) / 1.055)^2.4`. La forma a trozos (con un pequeño segmento lineal cerca de cero) evita la inestabilidad numérica de la forma de exponente puro en colores muy oscuros. Esta es la misma función que los perfiles ICC usan para codificar sRGB y la misma función que los navegadores usan internamente al renderizar códigos hex. La inversa para OKLCH → hex aplica la misma función en reversa: `v ≤ 0.0031308 ? v * 12.92 : 1.055 * v^(1/2.4) - 0.055`.

Matriz §15.1 de CSS Color 4: linear-sRGB ↔ XYZ D65

La matriz de CSS Color 4 §15.1 convierte linear-sRGB a CIE XYZ bajo el punto blanco D65: `X = 0.4124564 R + 0.3575761 G + 0.1804375 B`, `Y = 0.2126729 R + 0.7151522 G + 0.0721750 B`, `Z = 0.0193339 R + 0.1191920 G + 0.9503041 B`. La fila Y da la fórmula de luminancia sRGB. La matriz es la misma que se usa en cada biblioteca de gestión de color, incluyendo ICC, Adobe Color Engine, y la canalización open-source LCMS. La matriz inversa para OKLCH → hex aplica la inversa de §15.1.

Matrices OKLAB y paso de raíz cúbica de Ottosson 2020

La conversión XYZ D65 → OKLAB usa dos matrices y un paso de raíz cúbica publicados en el artículo OKLAB de Björn Ottosson de 2020. La primera matriz transforma XYZ a un espacio de respuesta de conos LMS (modelado libremente sobre las sensibilidades de los conos humanos L/M/S). Saque la raíz cúbica de cada canal para comprimir el rango dinámico de forma no lineal (el paso correctivo de uniformidad perceptual). La segunda matriz transforma LMS con raíz cúbica a las coordenadas L/a/b de OKLAB. Las tres operaciones usan los valores exactos publicados en la implementación de referencia del artículo; sin rederivaciones ni redondeos. La inversa para OKLCH → hex aplica estas matrices en reversa.

OKLAB ↔ OKLCH es cartesiana a polar

Los ejes `a` y `b` de OKLAB forman un plano de chroma perpendicular al eje L. OKLCH codifica polarmente ese plano: `C = sqrt(a² + b²)` (distancia euclidiana desde el gris), `H = atan2(b, a) * 180 / π` (ángulo en grados, envuelto a 0-360°). La inversa: `a = C * cos(H * π / 180)`, `b = C * sin(H * π / 180)`. La forma polar es preferida sobre OKLAB para almacenamiento de tokens de diseño porque el matiz es un eje estable — rotar el matiz no cruza accidentalmente por gris como puede hacer rotar `a` o `b` en OKLAB.

Detección de gama vía comprobación de rango de canal

Un color se considera dentro de la gama para un espacio objetivo (sRGB, Display P3, Rec.2020) si cada canal cae dentro de `[-ε, 1 + ε]` después de la conversión a las primarias de ese espacio, donde `ε = 1e-7` para absorber el ruido de precisión flotante alrededor de los límites. La insignia de gama para cada espacio se vuelve roja cuando cualquier canal excede el rango. OKLCH no tiene límite de gama — `oklch(0.7 0.4 30)` es una coordenada válida pero puede exceder el espacio de bytes de 256 por canal de sRGB. La comprobación se ejecuta en cada pulsación de tecla; combinada con Ajustar a sRGB, esto captura el pifia de adopción más común (OKLCH de gama amplia no mostrándose correctamente en pantallas heredadas).

Reducción binaria de chroma de Ajustar a sRGB

Ajustar a sRGB coincide con el algoritmo informativo de mapeo de gama en CSS Color 4 §13: mantenga L y H fijos en los valores actuales, búsqueda binaria de C ∈ [0, currentC] para el mayor C cuya conversión sRGB se mantenga dentro de gama. La búsqueda corre como mucho 30 iteraciones (precisión ~10⁻⁹), más que suficiente para precisión visual. Preservar L y H significa que el color ajustado se lee como la misma familia de matiz al mismo brillo — simplemente pierde saturación. No recortamos canales RGB directamente porque eso distorsiona el matiz notoriamente (especialmente en azules, que se recortan hacia el púrpura).

Buenas prácticas para flujos HEX / OKLCH

Use OKLCH como el formato de token canónico en código nuevo

Para cualquier sistema de diseño que envíe en 2025 o posteriores, defina colores de marca y rampas de paleta en OKLCH. El eje L da rampas perceptualmente uniformes automáticamente; el eje Chroma puede direccionar colores de gama amplia que hex no puede codificar. Mantenga un fallback hex para navegadores antiguos vía `@supports not (color: oklch(0 0 0))` o PostCSS en tiempo de compilación, pero haga de OKLCH la fuente de verdad en su almacén de tokens. Tailwind v4 y shadcn/ui ambos envían así; los nuevos proyectos pueden seguir su ejemplo sin fricción.

Genere rampas escalonando L, manteniendo C y H constantes

La construcción canónica de rampa OKLCH: fije C y H, barra L en incrementos iguales. Una rampa de 9 pasos `oklch(L 0.15 263)` para L = 0.1, 0.2, …, 0.9 produce espaciado visualmente uniforme a través de cada paso. Esto es exactamente lo que Tailwind v4 hace internamente. No barra C junto con L a menos que quiera que la intensidad cromática de la rampa varíe deliberadamente (raro). No derive H entre pasos — incluso una deriva de 5° hace que la rampa se sienta enredada.

Coincida con la precisión de Tailwind v4: 3 decimales L+C, 1 decimal H

La paleta por defecto de Tailwind v4 publica valores OKLCH con tres decimales en L y C, y un decimal en H — `oklch(0.629 0.193 263.4)` para blue-500. Coincidir con esta precisión en sus propios tokens significa que los flujos de pegar-en-config producen valores idénticos a los que Tailwind envía, y las herramientas de diff no señalarán diferencias espurias. El redondeo por defecto de la herramienta sigue esta convención; copiar y pegar en un bloque `@theme` es bit-exacto.

Ejecute OKLCH de gama amplia a través de la comprobación de gama Display P3

Si está apuntando a hardware Apple moderno (iPhone, iPad, MacBook desde 2017+) o enviando contenido con consciencia HDR, las insignias de gama le permiten empujar C por encima del techo sRGB para reclamar la saturación extra de P3. La compresión de chroma aplicada por el navegador evita que el color se recorte en pantallas solo sRGB. No pre-ajuste a sRGB por defecto a menos que sepa que toda su audiencia está en pantallas heredadas — eso pierde un 30%+ de la saturación que el hardware P3 puede renderizar.

Proporcione un fallback hex vía @supports para navegadores pre-2023

Aunque el soporte de navegador evergreen para `oklch()` ahora es del 94%+, la cola larga (IE 11, Android Chrome antiguo, webviews incrustadas) todavía necesita un fallback. Envuelva los tokens en `@supports (color: oklch(0 0 0))` y proporcione una variante hex en la rama alternativa. La salida de Ajustar a sRGB es exactamente ese fallback — generado automáticamente desde la tripleta OKLCH actual con L y H preservados. Los plugins PostCSS en tiempo de compilación como `postcss-oklab-function` también pueden insertar la aproximación sRGB en tiempo de compilación.

Documente tanto el OKLCH como el hex fuente en sus tokens

Cuando envíe una variable CSS como `--color-primary: oklch(0.629 0.193 263.4)`, incluya un comentario con el hex fuente: `/* source: #3b82f6 (Tailwind blue-500) */`. Seis meses después, cuando alguien necesite derivar un matiz oscuro relacionado o comprobar el valor contra un PDF de guías de marca, el hex fuente preserva el rastro completo de procedencia. OKLCH solo es significativo pero más difícil de reconocer a simple vista; el hex fuente es el identificador que la mayoría de compañeros de equipo buscarán primero.

Use el hash de URL para compartir decisiones de color en vivo

Cada cambio de color actualiza el hash de URL como `#hex=3b82f6` o `#oklch=...` automáticamente. Copie la URL en un hilo de Slack o issue de GitHub y cualquiera que la abra aterrizará en el mismo color con la misma tripleta OKLCH. Esto es más fiable que pegar una cadena OKLCH en chat — los destinatarios a veces escriben mal los decimales o envuelven la precisión incorrecta — y permite a un hilo de revisión de diseño hacer referencia a un color exacto en lugar de "el azul de marca que discutimos el martes". El hash nunca se transmite al servidor.

Preguntas frecuentes