Sobre esta herramienta
Ingresa un color en HEX (#12808c o #abc), rgb(18, 128, 140) o hsl(186, 78%, 31%) y velo al instante en los tres formatos, además de su contraste WCAG contra texto blanco y negro, y una pequeña paleta complementaria/análoga para combinar. Útil cuando un diseño te da un formato y tu código necesita otro, o cuando necesitas verificar que un color sea accesible. Funciona por completo en el navegador.
Cómo usarla
- 1 Escribe o pega un valor de color en el campo.
- 2 Los equivalentes en HEX, RGB y HSL, el contraste y la paleta se actualizan juntos.
- 3 Revisa la insignia AA/AAA para ver si el color es accesible como texto sobre blanco o negro.
- 4 Haz clic en cualquier valor o muestra de la paleta para copiarlo.
Preguntas frecuentes
¿Qué formatos de entrada se aceptan?
HEX de 3 y 6 dígitos (con o sin #), rgb()/rgba(), y hsl()/hsla(). El canal alfa se ignora.
¿Las conversiones son exactas?
HEX y RGB son exactos. HSL se redondea a grados y porcentajes enteros, que es el estándar en CSS.
¿Funciona sin conexión?
Sí, una vez que la página carga.
¿Qué significa la insignia AA/AAA?
Es el estándar de accesibilidad WCAG para contraste de texto: AA (4.5:1+) es el mínimo común, AAA (7:1+) es el nivel más estricto, y "AA Large" (3:1+) aplica solo a títulos grandes.
Guía
Incorporar esta herramienta
Agrega esta herramienta gratuita a tu sitio — copia el código abajo. Se mantiene siempre actualizado.
Herramientas para tu sitio →