# 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.

https://codeknife.dev/es/conversor-color/

## 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

1. Escribe un color en hex (`#36c`, `#3366cc`) o con `rgb()`, `hsl()`, `hwb()` u `oklch()`.
2. Elige **Convertir**, **Contraste** o **Paleta**. Contraste muestra un campo para el color de fondo.
3. 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.