Convertidor de Color — HEX, RGB, HSL y OKLCH

¿Qué es un convertidor de color?

// sRGB → linear → XYZ D65 → OKLAB → OKLCH
// References: W3C CSS Color 4 §11-15, Ottosson 2020 (https://bottosson.github.io/posts/oklab/)
// Worked example: #3b82f6 (Tailwind blue-500)

const srgb = [0x3b, 0x82, 0xf6].map(v => v / 255); // [0.231, 0.510, 0.965]

const toLinear = (v) => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
const lin = srgb.map(toLinear); // gamma-decoded linear-sRGB

// linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
const [lr, lg, lb] = lin;
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 matrix), 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;
console.log(`oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`);
// → oklch(0.629 0.193 263.4)

Características principales

Alternativas al convertidor de color comparadas

Ejemplos de conversión de color

#3b82f6

#FF5733

#FF6347

oklch(0.7 0.25 30)

#767676

#FF6347

hsl(220 70% 50%)

#3b82f6

Cómo usar el convertidor de color

1. 1

   Pegue o escriba cualquier color en cualquier formato

   Cada uno de los 9 campos de formato (HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH, OKLAB, Named) es directamente editable — no hay botón "Convertir" que pulsar. Pegue un hex de Figma, escriba un valor `oklch()` de una config de Tailwind, suelte un `hsl()` de una hoja de estilos antigua, o incluso escriba un color CSS con nombre como `tomato`. La herramienta analiza incrementalmente mientras escribe, así que un valor a medio escribir no destruye los demás hasta que confirme un formato válido. La entrada inválida obtiene un error discreto en línea; la entrada válida actualiza toda la cuadrícula.

2. 2

   Los 9 formatos se actualizan al instante

   La fuente de verdad interna es OKLCH (perceptualmente uniforme, sin límites de gama), y todos los demás formatos se derivan de ella en cada pulsación de tecla. El campo en el que está escribiendo mantiene su posición de cursor intacta — solo los *otros* ocho campos se vuelven a renderizar. Esto significa que puede editar el canal L de OKLCH directamente y ver hex, RGB, HSL y CMYK desplazarse en tiempo real sin perder su cursor. La matemática de conversión se ejecuta enteramente en JavaScript usando las mismas primitivas OKLAB que vienen en los navegadores modernos.

3. 3

   Use el selector para exploración visual

   Debajo de la cuadrícula de formatos hay un cuadrado de saturación-luminosidad (arrastre en cualquier punto para fijar S+L para el matiz actual), un deslizador de matiz (arrastre para rotar alrededor de la rueda de color), y un deslizador de alfa (arrastre para fijar la transparencia). En navegadores basados en Chromium (Chrome, Edge, Brave) el botón **EyeDropper** activa la API nativa `EyeDropper` — haga clic en cualquier punto de la pantalla, incluso fuera de la ventana del navegador, para muestrear el color de ese píxel. Safari y Firefox aún no incluyen la API, así que el botón se oculta en esos navegadores y el cuadrado SL + deslizador de matiz siguen siendo el selector principal.

4. 4

   Compruebe gama y contraste de un vistazo

   Tres insignias de gama (**sRGB**, **Display P3**, **Rec2020**) muestran si el color actual cae dentro del rango reproducible de cada espacio — útil cuando trabaja en OKLCH y desea saber qué pantallas renderizarán el valor con precisión. La fila de contraste muestra la razón WCAG 2.1 contra blanco y negro, más la puntuación APCA Lc (métrica de futuro para WCAG 3). Insignias de aprobado / fallido (AA, AAA) aparecen en línea. Si un color está fuera de la gama sRGB, un botón **Ajustar a sRGB** reduce el chroma hasta que quepa.

5. 5

   Copie en la sintaxis nativa de su plataforma

   Cada uno de los 9 campos de formato tiene su propio botón **Copiar** — un clic, el valor aterriza en su portapapeles, la etiqueta cambia brevemente a "¡Copiado!" para que lo sepa. Debajo del selector la sección **Copiar como código** genera fragmentos listos para pegar para cinco plataformas: propiedad personalizada CSS, token `@theme` de Tailwind v4, literal SwiftUI `Color(red:green:blue:)`, constante Jetpack Compose `Color(0xFF...)`, y Flutter `Color(0xFF...)`. El hash de URL (`#hex=...` o `#oklch=...`) también se actualiza para que pueda compartir un enlace en vivo al color exacto.

Errores comunes en la conversión de color

Asumir que una paleta HSL es perceptualmente uniforme:
hsl(220 50% 30%) → hsl(220 50% 60%) → hsl(220 50% 90%)
En pantalla se ven con espaciado desigual.

Use OKLCH para rampas perceptualmente uniformes:
oklch(0.30 0.10 220) → oklch(0.60 0.10 220) → oklch(0.90 0.10 220)
En pantalla se ven con espaciado uniforme.

Enviar nuestra salida CMYK directamente a una prensa:
hex #FF6347 → cmyk(0%, 61%, 72%, 0%)
El resultado impreso puede verse sucio o sobre-saturado.

Enviar el hex original al proveedor de imprenta:
hex #FF6347 → dejar que la imprenta haga conversión ICC contra su prensa
El resultado impreso coincide mucho mejor con el color en pantalla.

Fingir que Lc 60 = WCAG 4.5:1:
APCA Lc 60 → "esto pasa AA"
La razón WCAG 2 para el mismo par podría ser 3.8:1 (falla AA).

Compruebe ambas métricas independientemente:
razón WCAG 2 ≥ 4.5:1 para cumplimiento AA de texto del cuerpo, Y
APCA |Lc| ≥ 75 para legibilidad real.
Ambas deben pasar, no una sustituyendo a la otra.

Escalonar L de HSL para matices oscuros:
hsl(220 50% 30%) / hsl(220 50% 60%) / hsl(220 50% 90%)
90% se ve lavado; 30% se ve mucho más oscuro que la distancia a 60%.

Escalonar L de OKLCH para matices oscuros:
oklch(0.30 0.10 220) / oklch(0.60 0.10 220) / oklch(0.90 0.10 220)
Cada paso se ve como la misma distancia visual.

Copiar hex de 8 dígitos en un parser heredado:
#FF573380 → el parser trunca → #FF5733 (sin alfa)
La transparencia del 50% se pierde silenciosamente.

Verifique que el objetivo soporte hex de 8 dígitos, o use rgba():
para CSS moderno: #FF573380 (hex de 8 dígitos)
para soporte heredado: rgba(255, 87, 51, 0.5) (siempre soportado)
La sintaxis alfa explícita evita el truncamiento silencioso.

Ajustar cada color OKLCH a sRGB por defecto:
oklch(0.7 0.25 30) → ajustar → oklch(0.7 0.18 30)
Las pantallas P3 pierden 30%+ de saturación sin razón.

Compruebe primero la insignia Display P3:
si cabe-en-P3: mantenga el valor de gama amplia, añada fallback sRGB vía @supports
si excede P3: entonces ajuste a sRGB
Deje que el hardware de gama amplia haga su trabajo.

Quién usa esta herramienta

Desarrolladores frontend migrando a tokens OKLCH de Tailwind v4

Tailwind v4 estandarizó OKLCH para su paleta por defecto en 2024. Migrar un sistema de diseño antiguo basado en HSL o hex significa convertir cientos de colores de marca a OKLCH. Pegue cada hex, copie la salida OKLCH, suéltelo en el bloque `@theme`. Las insignias de gama en vivo señalan cualquier color que exceda sRGB para que pueda decidir si mantener el valor de gama más amplia para pantallas Display P3.

Diseñadores traduciendo colores de Figma a iOS / Android

Figma exporta hex por defecto, pero iOS quiere literales SwiftUI `Color(red:green:blue:)` y Android quiere constantes Jetpack Compose `Color(0xFF...)`. Pegue el hex de Figma una vez, copie el fragmento SwiftUI para el ingeniero de iOS y el fragmento Compose para el ingeniero de Android — ambos ya en la sintaxis exacta que espera cada plataforma, con el hex original preservado en un comentario para trazabilidad.

Diseñadores preparando pruebas de imprenta (aproximación CMYK)

Cuando un color de marca tiene que aparecer en una tarjeta de visita impresa, la aproximación CMYK da una estimación rápida para compartir con la imprenta antes de la conversión ICC propia. Pegue el hex de marca, copie los porcentajes CMYK, envíelos a la imprenta para una cotización rápida — luego deje en manos de la conversión ICC-aware de la imprenta la coincidencia de color final contra la prensa específica.

Ingenieros de accesibilidad verificando WCAG y APCA

WCAG 2.1 es el estándar regulatorio (ADA, EAA, Sección 508) hoy; APCA Lc es el sucesor propuesto para WCAG 3. Ambas métricas mostradas lado a lado significa que un diseñador puede verificar que un color de texto del cuerpo alcance 4.5:1 WCAG contra blanco, luego comprobar que también supera APCA Lc 75, en una sola pantalla — sin rebotar entre dos calculadoras separadas.

Educadores enseñando conceptos de espacio de color

La vista simultánea de nueve campos hace visibles las relaciones entre espacios de color. Escriba un valor OKLCH, observe cómo HSL se desplaza porque L significa cosas distintas en cada espacio. Arrastre el deslizador de matiz y vea hex, RGB y CMYK actualizarse todos. Muestre las insignias de gama poniéndose en rojo cuando empuja el chroma más allá de sRGB. La herramienta es su propio demo de aula para un curso universitario de gráficos o HCI.

Brand managers encontrando el color CSS con nombre más cercano

Cuando el copy de marketing dice "un acento color tomate" pero el hex de marca real es `#FF6347`, el campo Named devuelve `tomato (exact)` porque eso es literalmente a lo que se resuelve `tomato` en la especificación CSS. Para hexes casi-acertados, el campo devuelve el color con nombre más cercano con la distancia ΔE en OKLAB — útil para documentación, prosa y nombrado casual de colores.

Desarrolladores web convirtiendo paletas HEX heredadas a OKLCH

Un sitio más antiguo puede tener una paleta de marca de 50 colores definida en propiedades personalizadas CSS como códigos hex. Modernizar a OKLCH permite al equipo de marca expresar las mismas rampas en un espacio perceptualmente uniforme. Pegue cada hex, copie la salida OKLCH, intercámbielo en las definiciones de variable. El panel de Tintes claros / Matices oscuros debajo verifica que la rampa resultante sea visualmente uniforme antes de enviarla.

Mantenedores de código abierto documentando tokens de diseño

La documentación de tokens de diseño usualmente necesita mostrar el mismo color en múltiples sintaxis — hex para el bloque de código CSS, OKLCH para la tabla de especificación, el color con nombre para menciones en prosa. La vista de campos simultáneos permite a un mantenedor copiar cada uno en una sola pasada en lugar de volver a ejecutar tres conversiones separadas. El hash de URL compartible también permite a los colaboradores enlazar al color exacto en discusión en una issue de GitHub.

Matemáticas y algoritmos de conversión de color

OKLCH como fuente de verdad interna

La herramienta mantiene el valor de color canónico como un triple OKLCH internamente. Cada campo editable deriva su valor de visualización de ese triple en cada pulsación de tecla; cada edición del usuario actualiza primero el triple, luego dispara el re-renderizado de los otros ocho campos. Esto elimina la deriva de coma flotante por paso que afecta a los convertidores que enrutan a través de HSL o sRGB como su pivote. La elección de OKLCH sobre OKLAB es deliberada — la forma polar preserva el matiz como un eje estable, así que arrastrar el deslizador de matiz no cruza accidentalmente por gris. Según el artículo de Björn Ottosson de 2020, la uniformidad perceptual de OKLAB es el argumento más fuerte para tratarlo como la lingua franca de las matemáticas de color modernas.

Fuentes de las matrices (W3C CSS Color 4 + Ottosson 2020)

Cada matriz de conversión en el código está citada a su fuente primaria. La función de gamma a trozos sRGB ↔ linear-sRGB es W3C CSS Color 4 §11.2 (`v <= 0.04045 ? v/12.92 : ((v+0.055)/1.055)^2.4`). La matriz 3×3 linear-sRGB ↔ CIE XYZ D65 es CSS Color 4 §15.1. La matriz XYZ D65 ↔ LMS y el paso de raíz cúbica de OKLAB son de la implementación de referencia de Ottosson en `https://bottosson.github.io/posts/oklab/`, exactamente como se publicaron. Ninguna matriz se recomputa o se re-deriva — copiarlas verbatim mantiene la salida idéntica a los vectores de referencia de la especificación.

Fórmula CMYK ingenua y la advertencia ICC

Nuestra salida CMYK usa la fórmula estándar de manual: `K = 1 - max(R, G, B); C = (1-R-K)/(1-K); M = (1-G-K)/(1-K); Y = (1-B-K)/(1-K)` operando sobre valores sRGB normalizados. Esta es una aproximación deliberada. La precisión real en imprenta requiere una conversión con perfil ICC contra la prensa, tinta (p. ej., US Web Coated SWOP v2, Fogra39, Japan Color 2011) y papel específicos, lo que puede desplazar canales en un 5-15%. Mostramos el campo CMYK con una advertencia visible para que los usuarios no envíen nuestros valores directamente a una prensa. Trate la salida como una verificación de cordura para cotizaciones, no como un entregable.

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

Un color se considera dentro de la gama de un espacio objetivo (sRGB, Display P3, Rec2020) si cada canal cae dentro de `[-ε, 1 + ε]` después de la conversión a las primarias de ese espacio, donde `ε = 1e-7` absorbe el ruido de precisión de coma flotante alrededor de los límites. La insignia de gama para cada espacio se pone en rojo cuando cualquier canal excede el rango. Esto captura el caso común — un color OKLCH de gama amplia como `oklch(0.7 0.4 30)` reporta fuera-de-sRGB pero dentro-de-P3, indicándole qué pantallas lo renderizarán con precisión. La comprobación se ejecuta en cada pulsación de tecla.

Algoritmo de ajuste por reducción de chroma

Ajustar a sRGB usa búsqueda binaria en el eje chroma: mantiene L y H fijos en los valores actuales, busca C ∈ [0, chromaActual] 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. Esto coincide con el algoritmo informativo de mapeo de gama descrito en CSS Color 4 §13 — preservar luminosidad y matiz mientras se reduce solo el chroma mantiene el color ajustado reconociblemente en la misma familia de matiz. No recortamos canales RGB directamente porque eso distorsiona el matiz notoriamente (especialmente en azules).

Matrices CVD de Brettel + Machado

La simulación de daltonismo usa dos familias de matrices publicadas. Las tres dicromacias — protanopia, deuteranopia, tritanopia — usan matrices Brettel-Viénot-Mollon 1997 operando en linear-RGB (descodificar gamma primero, aplicar matriz, recodificar gamma). Las tres tricromacias anómalas — protanomalía, deuteranomalía, tritanomalía — usan matrices Machado-Oliveira-Fernandes 2009 con severidad 0.66, que corresponde a un paciente típico de tricromacia anómala. La acromatopsia y la acromatomalía parcial usan pesos de luminancia rec601 (`0.299R + 0.587G + 0.114B`) para una proyección a escala de grises. Las ocho simulaciones se renderizan en cada cambio de color.

WCAG 2 vs APCA: cuál usar y cuándo

WCAG 2.x (estándar actual) computa una razón de contraste simétrica a partir de la luminancia relativa: `(L1 + 0.05) / (L2 + 0.05)`, objetivo 4.5:1 para texto del cuerpo normal y 7:1 para AAA. Es el piso legal de cumplimiento para auditorías de accesibilidad en 2026. APCA (Accessible Perceptual Contrast Algorithm) es el sucesor propuesto para WCAG 3 — sensible a polaridad (luz-sobre-oscuro puntúa diferente de oscuro-sobre-luz), mejor correlacionado con la legibilidad percibida por humanos, objetivo `|Lc| ≥ 75` para texto del cuerpo. Ambas métricas mostradas en una sola fila permite a un diseñador alcanzar WCAG 2 para cumplimiento y APCA para legibilidad real sin rebotar entre dos calculadoras separadas.

Buenas prácticas para la conversión de color

Prefiera OKLCH para tokens de sistema de diseño; HEX para legado

Para cualquier sistema de diseño nuevo que se envíe en 2025 o posteriores, defina los colores de marca y las 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 el valor canónico en su almacén de tokens. Los sistemas heredados con miles de variables hex existentes pueden quedarse en hex hasta una migración planificada — no haga churn por sí mismo.

Trate la salida CMYK como aproximación; confirme con el proveedor de imprenta

Los números CMYK que esta herramienta muestra son una fórmula ingenua basada en sRGB, no una conversión con perfil ICC. Úselos para cotizaciones aproximadas y comps internos. Antes de cualquier tirada de imprenta real, envíe el hex original (no la aproximación CMYK) al proveedor de imprenta y deje que ellos hagan su propia conversión ICC contra la prensa, tinta y papel específicos. El desplazamiento del 5-15% por canal de una conversión apropiada puede fácilmente convertir un rojo nítido en un naranja sucio si la aproximación se envía directamente.

Use APCA Lc para accesibilidad de futuro

WCAG 2.x seguirá siendo el piso regulatorio durante varios años más, pero APCA es la dirección hacia donde se mueve el estándar. Para nuevos diseños, alcance `|Lc| ≥ 75` para texto del cuerpo y `|Lc| ≥ 60` para texto grande junto con los pisos de WCAG 2.1. APCA atrapa problemas de legibilidad que la razón simétrica de WCAG 2 pasa por alto — particularmente texto de trazo fino sobre fondos brillantes, donde la razón WCAG se ve bien pero el texto realmente desaparece a distancia de lectura normal.

Pase los colores de gama amplia por la comprobación de gama Display P3

Si está apuntando a hardware Apple moderno (iPhone, iPad, MacBook desde 2017+) o enviando contenido HDR-aware, defina los colores de marca en OKLCH y use la insignia Display P3 para verificar que caben en P3 incluso si exceden sRGB. Los colores de gama más amplia se ven notablemente más saturados en pantallas P3 y degradan elegantemente vía compresión de chroma aplicada por el navegador en pantallas solo sRGB. No pre-ajuste a sRGB a menos que sepa que toda su audiencia está en pantallas heredadas.

Elija matices oscuros perceptualmente uniformes vía tonos OKLCH

Al generar una rampa 50/100/200/.../900 para un color de marca, use el panel de Tonos: escalona L en incrementos iguales mientras mantiene C y H fijos. El resultado es una rampa perceptualmente uniforme donde la distancia visual entre 400 y 500 se ve idéntica a la distancia entre 500 y 600. Ajustar a mano rampas HSL para la misma uniformidad es un ejercicio de varias horas por color; OKLCH lo da gratis.

Use el cuentagotas con moderación para casar colores entre pestañas

La EyeDropper API (solo Chromium hasta 2026) le permite hacer clic en cualquier punto de la pantalla — incluso fuera del navegador — para muestrear el color de ese píxel. Útil para casar un color de una captura de pantalla, un fotograma de vídeo, o la UI de otra app. Trate el resultado como punto de partida, no como el valor final — el renderizado en pantalla aplica gestión de color que puede diferir del archivo fuente. Para colores de marca canónicos, obtenga siempre el hex de la fuente de diseño (Figma, Sketch, el PDF de directrices de marca) en lugar de usar el cuentagotas sobre una captura.

Marque URLs con `#hex=...` para decisiones de paleta compartibles

El color actual se codifica automáticamente en el hash de URL como `#hex=...` o `#oklch=...`. Copie la URL, péguela en un hilo de Slack o en una issue de GitHub, y cualquiera que la abra aterriza en exactamente el mismo color. Útil para hilos de revisión de diseño donde "el azul de marca" necesita significar un triple OKLCH específico. El hash se actualiza con cada cambio, así que la URL en su barra de direcciones siempre es el color actual en vivo — márquela para volver a una paleta específica más tarde.

Preguntas frecuentes