Cuentagotas de colores de imagen
Extrae colores de cualquier imagen con una lupa 8× y crea una paleta de hasta 12 muestras: hex, RGB y HSL, exportables como JSON, texto o CSS.
La imagen se dibuja y se muestrea localmente en tu navegador. No se sube nada.
Elige colores de una imagen
Haz clic para elegir una imagen o arrastra aquí un PNG, JPG, WebP o GIF
Cómo funciona
La imagen visible se reduce para caber en la página, pero el muestreo nunca confía en ese mapa de bits reducido: un lienzo oculto guarda el archivo a su resolución nativa completa, y cada posición del cursor se proyecta desde las coordenadas de pantalla a esa rejilla nativa antes de leer un píxel.
- Del cursor al píxel
- Una elección toma la posición del clic relativa a la imagen renderizada, la multiplica por anchoNatural ÷ anchoRender y redondea a un índice de píxel. Como el tamaño renderizado sale de getBoundingClientRect —píxeles CSS—, la proyección también es correcta en pantallas de alta densidad: devicePixelRatio afecta a cómo pinta el navegador, no a la fracción de la imagen donde está tu puntero. El color se lee con getImageData del lienzo a resolución nativa, así que obtienes el píxel real del archivo, no un artefacto de vista previa suavizado.
- La lupa y el cuentagotas del sistema
- La lupa 8× redibuja una ventana de 15 píxeles alrededor del cursor con escalado de vecino más cercano para que cada píxel siga siendo cuadrado y contable, con una mira marcando el píxel exacto muestreado y su hex debajo. Donde existe la API EyeDropper, el botón de pantalla completa entrega el trabajo al selector nativo del navegador —misma tubería de coordenadas, pero puede salir de esta página—.
- Elección manual, sin cuantización
- Los colores elegidos van a una paleta limitada a 12 que rechaza duplicados hex exactos, porque los bordes, degradados y ruido de compresión de una foto generan decenas de casi-repetidos que solo un humano puede juzgar si merecen guardarse. El resultado —hex, RGB, HSL y exportaciones JSON/CSS— es una lista de decisiones que tomaste tú.
Preguntas frecuentes
¿Por qué los colores cambian de píxel a píxel cerca de bordes o degradados?
Porque eso es lo que hacen las imágenes reales: los bordes van suavizados, los degradados van tramados y la compresión JPEG salpica matices vecinos en cada transición. Elegir un píxel de la foto de un coche rojo puede devolver honestamente un rosa grisáceo. Usa la lupa 8× para aterrizar en el centro de una zona plana y toma varias muestras de la misma región para juzgar su color dominante.
¿Qué hago después con los colores elegidos?
Cada muestra lleva hex, RGB y HSL, copiables con un clic, y la paleta se exporta como JSON, texto plano o variables CSS. Un siguiente paso sensato para trabajo de interfaz es comprobar la legibilidad de los pares texto-fondo con el Comprobador de contraste de color integrado.
¿Por qué no extrae automáticamente una paleta de toda la imagen?
A propósito: esta herramienta es un cuentagotas, no un cuantizador. La extracción automática promedia o agrupa millones de píxeles (median-cut, k-means) y devuelve colores representativos que nadie eligió —a menudo versiones turbias de los tonos que querías—. Cada color de tu paleta está aquí porque tú lo señalaste; por eso se rechazan los duplicados y el tope son 12 conscientes.
¿Dónde está el botón de pantalla completa? No lo veo.
Solo aparece cuando el navegador expone la API EyeDropper —hoy Chrome y Edge de escritorio—. Ese botón entrega la elección al cuentagotas de nivel de sistema operativo, que puede tomar cualquier píxel de tu pantalla, no solo esta imagen. En Firefox y Safari el botón no está porque falta la API, y la lupa de aumento es el camino completo.
¿Se sube algo a un servidor?
No. La imagen se decodifica en un lienzo dentro de esta pestaña y cada muestra se lee con getImageData de esa copia local. No hay subida, y el único trabajo de la página —píxel dentro, hex fuera— no necesita red.