Convierte valores de color entre HEX, RGB, HSL y CMYK, y calcula el ratio de contraste de accesibilidad WCAG 2.1.
💡 Nota: WCAG 2.1 recomienda una relación de al menos 4.5:1 para texto normal (AA) y 7:1 para AAA; el texto grande requiere 3:1 para AA y 4.5:1 para AAA.
Convierte valores de color entre HEX, RGB, HSL y CMYK, y calcula el ratio de contraste de accesibilidad WCAG 2.1. Úsala para trabajo diario, desarrollo, aprendizaje o comprobaciones rápidas.
Esta herramienta funciona en tu navegador. Antes de usar datos sensibles, comprueba que confías en tu dispositivo y navegador.
Esta herramienta convierte colores entre HEX, RGB, HSL y CMYK en tiempo real. Elige un color con el selector o escribe en cualquier campo y los otros tres se actualizan al momento, cada uno con su botón de copiar. Por ejemplo, el ámbar #F59E0B equivale a rgb(245, 158, 11), hsl(38, 92%, 50%) y cmyk(0%, 36%, 96%, 4%). El campo HEX también acepta la forma abreviada de tres dígitos, como #F90, que se expande a #FF9900.
Cada formato tiene su uso. HEX es el estándar en código web y aplicaciones de diseño; RGB corresponde a la luz roja, verde y azul de la pantalla; HSL describe tono, saturación y luminosidad, así que para obtener un tono más claro u oscuro del mismo color basta con cambiar la L, algo muy práctico en CSS; CMYK representa las cuatro tintas de impresión. Al escribir RGB, HSL o CMYK, usa números enteros separados por comas, como rgb(255, 153, 0), hsl(36, 100%, 50%) o cmyk(0%, 40%, 100%, 0%). La transparencia (alfa) no está disponible.
Ten en cuenta que aquí el CMYK se calcula a partir de RGB con una fórmula sencilla, sin perfil de color ICC. El color impreso real depende del papel, las tintas y la máquina, así que antes de imprimir guíate por las muestras o el perfil de tu imprenta. Además, HSL se redondea a números enteros, por lo que al volver de HSL a HEX un canal puede variar en un paso; es un redondeo normal, no un error.
En la pestaña del comprobador de contraste eliges el color del texto y el del fondo. La herramienta calcula la relación de contraste según WCAG 2.1 e indica si cumple para texto normal (AA 4.5:1, AAA 7:1), texto grande (AA 3:1, AAA 4.5:1) y componentes de interfaz (3:1), con una vista previa en directo. Por ejemplo, el gris #767676 sobre blanco da 4.54:1 y aprueba AA por poco, mientras que #777777 se queda en 4.47:1 y no cumple. Para un análisis más completo con sugerencias de color, usa el Analizador de contraste de color de este sitio.
Cada par de los seis dígitos hexadecimales es un canal en base 16. En #F59E0B, F5 = 245 (rojo), 9E = 158 (verde) y 0B = 11 (azul), es decir, rgb(245, 158, 11). Pega el código HEX en la herramienta y obtendrás RGB, HSL y CMYK automáticamente.
La pantalla emite luz RGB y la impresora usa tintas CMYK que absorben luz; cada una abarca una gama de colores distinta, y los azules, verdes y naranjas muy vivos a menudo no se pueden imprimir tal cual. El CMYK de esta herramienta es una conversión matemática que no tiene en cuenta papel ni tinta, así que pide una prueba con la configuración de tu imprenta.
WCAG define texto grande como al menos 18 pt (unos 24 px) con peso normal, o al menos 14 pt (unos 18,66 px) en negrita. El texto grande necesita 3:1 para AA y el texto normal 4.5:1. Los componentes de interfaz, como bordes de botones, contornos de campos e iconos, necesitan al menos 3:1 frente a los colores adyacentes.
Por ahora no. La herramienta interpreta rgb(r, g, b), hsl(h, s%, l%) y cmyk(c%, m%, y%, k%) sin alfa, y HEX de 3 o 6 dígitos. Para comprobar un color semitransparente, calcula primero el color sólido que resulta sobre su fondo y analiza ese.
Ver esta categoría: Diseño y color
Crea cajas con sombras multidimensionales y efectos de vidrio esmerilado con copia rápida de reglas CSS.
Evalúa ratios de contraste entre fondo y texto con calificaciones AA/AAA y simulador de daltonismo.
Genera partículas, cuerpos elásticos, colisiones y campos de gravedad interactivos en tiempo real con Canvas.
Coloca puntos de anclaje, arrastra las manillas Bézier en un lienzo de 500×500 y obtén al instante el atributo d del trazado SVG y una regla CSS clip-path: path().
