Conversor de colores
Escribe un color en cualquier formato CSS o usa el selector y obtenlo en HEX, RGB, HSL, HWB y OKLCH. Después mira si se lee bien sobre un fondo con la relación de contraste WCAG 2.
Se ejecuta en tu navegador: no se sube nada.
HEX, rgb(), hsl(), hwb() u oklch(). Con comas o espacios, “/ alfa” opcional.
Este color está fuera del rango sRGB: los valores de arriba son el color más cercano que puede mostrar una pantalla estándar.
En todos los formatos
Comprobador de contraste (WCAG 2)
El color de arriba es el del texto. Elige el fondo sobre el que va.
Texto de ejemplo grande
Texto de ejemplo normal, el veloz murciélago hindú comía feliz cardillo y kiwi.
Cómo se usa
- Escribe un color (#1e90ff, rgb(30 144 255), hsl(210 100% 56%), hwb(…) u oklch(…)) o elige uno con el selector.
- Copia de la lista el formato que necesites.
- En la sección de contraste, indica el color de fondo: verás la relación y si cumple AA y AAA para texto normal y grande.
Preguntas frecuentes
¿Qué formatos puedo escribir?
HEX de 3, 4, 6 u 8 dígitos, rgb()/rgba(), hsl()/hsla(), hwb() y oklch(), con comas o espacios y un “/ alfa” opcional. También valen porcentajes y unidades de tono (deg, rad, turn).
¿Qué es OKLCH?
Un espacio de color moderno de CSS donde luminosidad, croma (intensidad) y tono se comportan mucho más como la visión humana que HSL. Los colores fuera del rango sRGB se recortan al más cercano que se puede mostrar y la página lo avisa.
¿Cómo se calcula la relación de contraste?
Con la fórmula de WCAG 2: (L1 + 0,05) / (L2 + 0,05), donde L es la luminancia relativa de cada color. Una relación de 4,5:1 cumple AA para texto normal, 3:1 para texto grande y partes de la interfaz, y 7:1 cumple AAA.
¿Qué es texto grande?
Al menos 24 px, o 18,66 px en negrita. El texto más pequeño necesita más contraste.
¿Y la transparencia?
Un color de texto translúcido se mezcla con el fondo antes de medir. El fondo se trata como opaco.