Convierte un color entre HEX, RGB, HSL y OKLCH, genera una escala de once tonos y comprueba su contraste contra blanco y contra negro según los criterios de la WCAG.
OKLCH es el formato que vale la pena conocer: está construido para que una misma luminosidad se perciba igual sea cual sea el tono, cosa que HSL no consigue ni de lejos. Por eso es mucho más fácil hacer escalas que se vean coherentes.
Cómo se usa
- Elige un color con el selector o escríbelo en cualquier formato.
- Copia el formato que necesites.
- Mira la tabla de contraste antes de usarlo para texto.
Preguntas frecuentes
- ¿Qué contraste necesito?
- 4,5:1 para texto normal y 3:1 para texto grande o negrita, que es el nivel AA. El AAA pide 7:1. Por debajo de 3:1 el texto cuesta de leer para mucha gente.
- ¿Por qué el amarillo y el azul con la misma luminosidad HSL se ven tan distintos?
- Porque HSL no tiene en cuenta cómo percibe la luz el ojo humano, que es mucho más sensible al verde y al amarillo. OKLCH sí lo corrige.
- ¿Qué formatos de entrada acepta?
- HEX de tres, cuatro, seis u ocho dígitos, rgb(), hsl() y los nombres de color CSS como «tomato» o «rebeccapurple».
Herramientas relacionadas
Minificar CSSCSSO: reestructura y fusiona reglas, no solo quita espacios.
Minificar JavaScriptTerser en el navegador, con acortado de nombres opcional.
Contar palabras y caracteresRecuento en vivo, tiempo de lectura y los límites de cada plataforma.
Cambiar mayúsculas y minúsculasMAYÚSCULAS, minúsculas, Tipo Título, camelCase, snake_case y más.
Ordenar y limpiar líneasOrdena, quita duplicados y líneas vacías, numera o invierte una lista.