Encoders & Utilities

Conversor de color y contraste WCAG

HEX ↔ RGB ↔ HSL con generador de paleta y comprobador de contraste WCAG.

Pick or paste a color Accepts HEX, rgb()/rgba(), hsl()/hsla(). Try the eyedropper or paste from anywhere.

Try:

Sobre esta herramienta

Color Converter traduce colores entre los formatos que diseñadores y desarrolladores usan a diario: HEX (#3366FF), RGB / RGBA, HSL / HSLA, HSV, OKLCH, CMYK, además de los colores nombrados de CSS (rebeccapurple, tomato, los 147). Escriba cualquier formato y el resto se actualiza al instante; el alfa se preserva en los formatos que lo soportan.

Dos extras hacen que esto sea más que un convertidor pasivo. El generador de paletas produce escalas tonales (50/100/.../900) y grupos de armonía (complementarios, tríadicos, tetrádicos, complementarios divididos) alrededor de su color base — útil para rellenar un sistema de diseño. El comprobador de contraste WCAG elige un primer plano y un fondo, calcula el ratio de contraste según WCAG 2.2 y le dice si el par pasa AA (4,5:1 pequeño, 3:1 grande) y AAA (7:1 pequeño, 4,5:1 grande).

Cuándo utilizar esta herramienta

Construir un sistema de diseño. Elija un color de marca, obtenga una escalera tonal completa para roles primario/secundario/neutro.
Auditar accesibilidad. Pase cada par texto/fondo por el comprobador de contraste; por debajo de 4,5:1 el criterio AA de WCAG falla.
Migrar CSS. Convierta constantes hex antiguas a OKLCH para el flujo moderno de gama amplia.
Entrega diseñador-desarrollador. Traduzca los valores RGB de Figma a hex CSS (o viceversa) sin errores de redondeo.

Sobre contraste WCAG y OKLCH

El contraste WCAG 2.2 usa la fórmula histórica de «luminancia relativa» — adecuada para la mayoría de los casos pero conocida por sobrevalorar e infravalorar ciertos pares de colores. APCA (el algoritmo previsto para WCAG 3) corrige esto con una métrica perceptualmente uniforme; mostramos ambos números para que pueda planificar con antelación. OKLCH es un espacio de color CSS reciente que es perceptualmente uniforme — pasos numéricos iguales en L (luminosidad) se ven iguales al ojo, lo que hace generar paletas consistentes mucho más fácil que con HSL.

Preguntas frecuentes

¿Cuál es el umbral WCAG AA?

Para texto normal: ratio de contraste ≥ 4,5:1 entre texto y fondo. Para texto grande (≥ 18pt normal o ≥ 14pt negrita): ratio ≥ 3:1. El nivel AAA es más estricto (7:1 / 4,5:1). La mayoría de sitios orientados al público apuntan a AA; las interfaces de gobierno y sanidad exigen cada vez más AAA. Nuestro comprobador muestra pasa/falla para cada umbral, así no tiene que memorizar los números.

¿Por qué HEX y RGB son equivalentes?

Son el mismo color escrito de forma distinta. #3366FF es solo una abreviatura para «rojo=0x33 (51), verde=0x66 (102), azul=0xFF (255)» — tres bytes. La notación RGB en CSS (rgb(51, 102, 255)) escribe los mismos tres bytes en decimal. HEX es más compacto (7 caracteres vs ~17); RGB es más legible cuando necesita calcular sobre los canales. Use el que encaje en su contexto; el resultado es idéntico.

¿Qué es OKLCH y debería usarlo?

OKLCH es un espacio de color de CSS Color 4 diseñado para ser perceptualmente uniforme — saltos numéricos iguales en L (luminosidad), C (cromaticidad) o H (tono) se ven iguales al ojo. HSL no es uniforme; un amarillo brillante a L=80 se ve mucho más brillante que un azul marino a L=80. Para sistemas de diseño y paletas tonales OKLCH es mucho más fácil de manejar. El soporte de navegador es excelente (Safari 16.4+, Chrome 111+, Firefox 113+).

¿El comprobador de contraste soporta opacidad?

Sí — los primeros planos semitransparentes se componen sobre el color de fondo antes de calcular el contraste, que es lo que los humanos realmente ven. rgba(0,0,0,0.6) sobre blanco renderiza como el mismo color que #666666 sobre blanco, y los tratamos idénticamente. Si compone sobre un fondo complejo (imagen, gradiente), elija el color de fondo medio como referencia.