Conversor de color

Convierte un color entre HEX, RGB, HSL, HWB y OKLCH, comprueba su contraste WCAG con un fondo o crea con él una paleta tonal de Material 3.

Ejemplos de código

Copia estos ejemplos en tu propio proyecto. Cada uno usa solo la biblioteca estándar del lenguaje, así que no hay nada que instalar.

Marca con una estrella hasta 3 lenguajes para verlos primero en todas las páginas de herramientas.

const foreground = '#3366cc'
const background = '#ffffff'

const luminance = (hex) => {
  const [r, g, b] = [1, 3, 5].map((start) => {
    const channel = parseInt(hex.slice(start, start + 2), 16) / 255
    return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4
  })
  return 0.2126 * r + 0.7152 * g + 0.0722 * b
}

const [lighter, darker] = [luminance(foreground), luminance(background)].sort((a, b) => b - a)
const ratio = (lighter + 0.05) / (darker + 0.05)

// Truncated, not rounded: 4.499 must not pass as 4.5.
console.log((Math.floor(ratio * 100) / 100).toFixed(2))

Qué hace

Convierte un color entre HEX, RGB, HSL, HWB y OKLCH, comprueba la relación de contraste WCAG con un fondo y crea con él una paleta tonal de Material 3. Todo funciona en tu navegador.

Cómo se usa

Escribe un color en hex (#36c, #3366cc) o con rgb(), hsl(), hwb() u oklch().
Elige Convertir, Contraste o Paleta. Contraste muestra un campo para el color de fondo.
Copia o descarga el resultado, o envíalo a otra herramienta.

Ejemplos

#3366cc es rgb(51 102 204), hsl(220 60% 50%), hwb(220 20% 20%) y oklch(0.5325 0.1679 262.29). Sobre blanco tiene un contraste de 5,36:1: basta para AA en texto normal, no para AAA.

Conviene saber

La relación sigue WCAG 2: luminancia relativa a partir de sRGB lineal y luego (más claro + 0,05) / (más oscuro + 0,05). Se trunca a dos decimales, nunca se redondea hacia un aprobado.
AA pide 4,5:1 para texto normal y 3:1 para texto grande; AAA pide 7:1 y 4,5:1.
Los valores se redondean antes a canales enteros de 8 bits, de modo que cada línea describe el mismo color hex. Un color OKLCH fuera de sRGB se ajusta al color mostrable más cercano.
La paleta conserva el tono y el croma del color base y lista los tonos 0, 10, 20 … 90, 95, 99 y 100, como Material 3.
No se admiten nombres de color ni canales alfa.

¿Qué notaciones de color lee?

Hex (#36c o #3366cc) y las funciones CSS rgb(), hsl(), hwb() y oklch(), con espacios o comas entre los valores. No admite nombres de color ni transparencia. El resultado muestra el mismo color en cada notación, redondeado a canales sRGB enteros.

Preguntas frecuentes

¿Qué relación de contraste pide WCAG?

AA pide 4,5:1 para texto normal y 3:1 para texto grande y elementos de interfaz. AAA pide 7:1 y 4,5:1. La relación se trunca, nunca se redondea hacia arriba, así que 4,49 no cuenta como aprobado.

¿Qué es OKLCH y por qué usarlo?

OKLCH describe un color con luminosidad, croma y tono en un espacio donde pasos iguales parecen igual de distintos. Es útil para crear escalas y para ajustar la luminosidad sin que el tono se desplace.

¿Qué hace el modo paleta?

Crea una paleta tonal de Material 3: el tono y el croma del color base en 13 tonos, de 0 (negro) a 100 (blanco). La biblioteca de color que lo hace solo se carga al elegir este modo.

Cambios de esta herramienta