Conversor de colores y comprobador de contraste

¿Qué es esta herramienta?

Pega un color en cualquier formato —#ff6347, rgb(255 99 71), hsl(9 100% 64%) o simplemente tomato— y cópialo en todos los demás. Cambia al comprobador de contraste para probar colores de texto y fondo según WCAG 2 y obtener el color más cercano que cumple cuando una pareja falla.

Las pantallas mezclan luz roja, verde y azul, así que HEX y RGB describen los colores como lo hacen los monitores. HSL y HSV son más fáciles de ajustar a mano, CMYK aproxima las tintas de impresión y OKLCH es un espacio perceptual moderno admitido en CSS.

Las relaciones de contraste WCAG van de 1:1 a 21:1. El texto normal necesita al menos 4,5:1 para AA y 7:1 para AAA; el texto grande (24px o 18,66px en negrita) y los componentes de interfaz necesitan 3:1. Los colores translúcidos se mezclan con el fondo antes de medir.

Cómo usar Conversor de colores y contraste

1. Escribe o pega un color, o elígelo con el selector.
2. Copia el formato que necesites: HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH o el nombre CSS.
3. Haz clic en un tinte o una sombra para explorar versiones más claras y oscuras del mismo tono.
4. Abre el comprobador de contraste, define texto y fondo y mira si cumplen WCAG AA y AAA.
5. Si una pareja falla, usa el color sugerido: mantiene el tono y ajusta la luminosidad hasta cumplir.

Ejemplos

tomato

#ff6347
rgb(255 99 71)
hsl(9 100% 64%)

Preguntas frecuentes