Conversor de colores

Convierte colores entre HEX, RGB, HSL y OKLCH y comprueba el contraste para accesibilidad (WCAG).

Se procesa en tu dispositivo: tu archivo no sale de tu computadora

Color (HEX, RGB, HSL, OKLCH o nombre CSS)

hex: #0f766e
rgb: rgb(15 118 110)
hsl: hsl(175.3 77.4% 26.1%)
oklch: oklch(51.09% 0.0861 186.39)

Contraste para texto

Color de fondo

Texto de ejemplo sobre el fondo

Contraste: 5,47:1

Tamaño del texto	AA	AAA
Texto normal	Cumple	No cumple
Texto grande (18 pt o 14 pt en negrita)	Cumple	Cumple

Contraste con blanco: 5,47:1 · con negro: 3,84:1

Qué hace Conversor de colores

El conversor de colores lee un color en HEX, RGB, HSL, OKLCH o por su nombre CSS y te lo muestra en todos esos formatos, listo para copiar en tu CSS o en tu herramienta de diseño. También calcula el contraste del color sobre un fondo según las pautas WCAG 2 e indica si cumple los niveles AA y AAA para texto normal y grande, para que tus textos se lean bien.

Límites

Si un trabajo tarda más de 1 minuto, se detiene para no bloquear tu dispositivo.
Se procesa en tu navegador: tus archivos no se suben a ningún servidor.

Preguntas frecuentes

¿Qué es OKLCH y para qué sirve?

Es una forma de describir colores por luminosidad, croma y tono que se parece a cómo los percibimos. Facilita crear paletas armónicas y todos los navegadores modernos la aceptan en CSS.

¿Qué contraste necesita un texto?

El nivel AA pide al menos 4,5:1 para texto normal y 3:1 para texto grande; el nivel AAA, 7:1 y 4,5:1.

¿Acepta colores con transparencia?

Sí: #RRGGBBAA, rgb(… / 0,5) y similares. Para el contraste, el color se mezcla con el fondo como lo haría el navegador.