Extrae colores de una imagen, comprueba el contraste WCAG y convierte HEX, RGB, HSL.
Elige una imagen para ver sus colores principales.
Tres pequeñas tareas de color en un solo sitio. Colores de una imagen lee una imagen y devuelve sus colores principales, cada uno con el porcentaje de la imagen que ocupa, para sacar una paleta de una foto, un logotipo o una captura. Comprobador de contraste te dice si el texto de un color se lee sobre otro color según las pautas de accesibilidad WCAG. Conversor pasa un color entre HEX, RGB y HSL mientras escribes. La imagen se procesa en tu navegador y no se sube.
La herramienta reduce la imagen a un máximo de 160 píxeles en el lado largo, cuenta cada píxel en una cuadrícula de colores parecidos y corta en dos, una y otra vez, el grupo con mayor dispersión de color. Es el método de corte por la mediana (median cut). Cada muestra es el promedio exacto de los píxeles de su grupo y el porcentaje es cuántos píxeles tiene. Los píxeles transparentes se ignoran. El método no tiene azar, así que la misma imagen da siempre la misma paleta. Recuerda que "principal" es por área: un logotipo pequeño y vivo sobre un fondo gris grande mostrará primero el gris.
El contraste es la proporción entre el brillo de dos colores, de 1:1 (idénticos) a 21:1 (negro sobre blanco). WCAG 2 fija el mínimo para texto legible en 4,5:1 para texto normal y 3:1 para texto grande, es decir, de 24 píxeles, o 18,66 píxeles en negrita, en adelante. El nivel AAA, más exigente, pide 7:1 y 4,5:1. Los botones, iconos y bordes de formulario necesitan 3:1 respecto a lo que tienen al lado. La herramienta muestra cada comprobación como cumple o no cumple, con una vista previa de tu texto sobre tu fondo.
Cuando el texto normal no cumple, la herramienta sugiere el color más cercano con el mismo tono y saturación que sí cumple, y un botón lo aplica.
Un texto gris #777777 sobre fondo blanco tiene un contraste de 4,48:1. No cumple AA para texto normal por poco, y es un color muy común en la web. Oscurece el gris a #767676 y la proporción pasa a 4,54:1, que cumple. La mayoría de la gente no ve la diferencia, pero decide si una página pasa una auditoría de accesibilidad.
Escribe en el campo HEX, RGB o HSL, o usa el selector de color, y los otros dos se actualizan. Acepta hex de 3 o 6 dígitos con o sin almohadilla, rgb(234, 88, 12) con comas o espacios y hsl(21, 90%, 48%). HSL se muestra en números enteros, como suele escribirse en CSS, así que convertir de HSL a HEX puede diferir del original en un paso.
Imágenes de hasta 40 MB y unos 50 megapíxeles. Los colores se leen como los muestra el navegador, en sRGB.
No. El navegador decodifica y reduce la imagen, y los colores se calculan en tu dispositivo.
Para WCAG 2 nivel AA, 4,5:1 para texto normal y 3:1 para texto grande y para partes de la interfaz como bordes de botón e iconos. Para el nivel AAA, 7:1 para texto normal y 4,5:1 para texto grande.
El de 24 píxeles (18 puntos) o más, o el de 18,66 píxeles (14 puntos) o más si está en negrita.
Actualizado el 13 de octubre de 2026 · Más en Imágenes y códigos
