Extrae colores exactos píxel a píxel de cualquier imagen con lupa de alta precisión y genera la paleta dominante.
Arrastra y suelta una imagen aquí, o haz clic para subir
Supports PNG, JPG, WEBPExtrae colores exactos píxel a píxel de cualquier imagen con lupa de alta precisión y genera la paleta dominante. Ú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.
Al diseñar una web, una presentación o una imagen para redes, a menudo necesitas el color exacto de un logotipo, una foto de producto o una imagen de referencia. Adivinar el código a ojo falla con facilidad, y pegar una captura en un programa de diseño es engorroso. Con esta herramienta subes una imagen, haces clic donde quieras y obtienes al instante los valores HEX, RGB y HSL de ese píxel, listos para copiar en CSS, Figma o Canva.
Al pasar el cursor por la imagen aparece una lupa redonda que amplía los 9×9 píxeles alrededor del puntero y marca en rojo el píxel seleccionado. En las fotos, los bordes y degradados hacen que píxeles vecinos varíen mucho, así que la lupa te ayuda a evitar colores sucios por el suavizado o el ruido y acertar con el tono que buscas. Cada color se guarda en el historial para comparar y armar una paleta.
Con los colores elegidos, el comprobador de contraste WCAG 2.1 te deja fijar un color de primer plano (texto) y de fondo, calcula la relación de contraste e indica si cumple. El texto normal necesita 4,5:1 para AA y 7:1 para AAA; el texto grande (18 pt o más, o 14 pt en negrita) se relaja a 3:1 y 4,5:1. Revisar el contraste al derivar colores de botones o títulos a partir del color de marca evita problemas para personas mayores, con baja visión o que leen bajo el sol.
Ten en cuenta que el valor obtenido es el guardado en el archivo de imagen. Las fotos dependen de la iluminación, el balance de blancos y la compresión, así que el mismo producto puede dar códigos distintos en cada foto; para colores de marca oficiales usa el manual de identidad. La imagen se lee con Canvas dentro del navegador y nunca se sube.
Al hacer clic en un píxel se muestran HEX, RGB y HSL a la vez, y cada uno se copia con un clic.
El ruido, los degradados y el suavizado de bordes hacen que los píxeles vecinos varíen. Usa la lupa para apuntar a una zona de color uniforme.
Texto normal: 4,5:1 para AA y 7:1 para AAA. Texto grande (18 pt o más, o 14 pt en negrita): 3:1 para AA y 4,5:1 para AAA.
No. Los píxeles se leen solo en tu navegador y la imagen nunca se envía a un servidor.
Ver esta categoría: Diseño y color
Configura y previsualiza maquetaciones CSS Flexbox y Grid visualmente, visualiza animaciones y copia el código CSS.
Genera combinaciones cromáticas armoniosas a partir de un color principal con exportación en HEX y RGB.
Optimiza y comprime código SVG localmente eliminando metadatos y etiquetas redundantes con vista previa.
Crea y previsualiza gradientes lineales y radiales, explora combinaciones prediseñadas y copia el código CSS.
