Obtener el color de una imagen (cuentagotas)
Carga una imagen con el selector de archivos, arrastrándola o con Ctrl + V y haz clic o toca el punto que quieras. El cuentagotas muestra el color de ese píxel en HEX, RGB y HSL y calcula los colores principales de la imagen. La imagen no se sube.
Cómo se calcula
Tu imagen no sale de tu dispositivo
El cuentagotas funciona por completo en tu navegador: la imagen se decodifica localmente y se dibuja en una superficie de dibujo (canvas), y el valor del color se lee directamente de la memoria con getImageData(). No hay subida ni ninguna petición de red con datos de la imagen; al cerrar la página, la imagen desaparece. Solo para las fotos HEIC que tu navegador no puede abrir por sí mismo se descarga una vez un decodificador desde este sitio web, y aun así tu foto se queda en tu dispositivo.
Cómo leer un color
- Elige una imagen, arrástrala al recuadro o pégala con Ctrl + V (por ejemplo, una captura de pantalla).
- Haz clic o toca el punto que quieras. Con el teclado, las flechas mueven el cuentagotas píxel a píxel.
- Copia el valor HEX, RGB o HSL. Los últimos ocho colores elegidos se quedan como muestras.
Cómo se obtienen los colores principales
Para los colores principales, la imagen se reduce a 200 píxeles como máximo por lado. Cada píxel opaco cae en uno de 4096 grupos de color (16 niveles por canal). Los grupos más frecuentes y claramente distintos se convierten en hasta seis colores principales; el porcentaje es su proporción sobre todos los píxeles opacos. Es una cuantización sencilla: sirve para hacerse una idea, pero no es una medición de color.
Por qué el valor puede diferir del original
- Perfiles de color: los navegadores convierten a sRGB las imágenes con perfil incrustado (p. ej., Display P3 del móvil). El cuentagotas muestra el valor sRGB, el mismo que usarías en CSS; un programa de edición de imágenes en modo P3 muestra otras cifras.
- Compresión: JPEG y WebP guardan los colores con pérdida; los píxeles vecinos de una superficie «de un solo color» pueden diferir en algunos niveles.
- Las imágenes muy grandes (más de 4096 píxeles por lado) se reducen para leer los colores, y al hacerlo se promedian los píxeles vecinos. La posición mostrada se refiere a la imagen original.
Preguntas frecuentes
¿Se sube o se guarda mi imagen?
No. La imagen solo se procesa en la memoria de tu navegador y no se envía a ningún sitio. Tampoco se guarda nada en el almacenamiento del navegador (localStorage).
¿Cómo saco el código de color de una captura de pantalla?
Haz la captura (p. ej., en Windows: Win + Mayús + S), haz clic en esta página y pulsa Ctrl + V. Después haz clic en el punto que te interese: el código HEX aparece al instante.
¿Qué formatos de imagen funcionan?
JPG, PNG, WebP, GIF, BMP y AVIF, siempre que tu navegador pueda abrirlos, además de las fotos HEIC del iPhone. En las imágenes con transparencia, el cuentagotas muestra también la opacidad del píxel.
¿Puedo reutilizar el color?
Sí: copia el valor HEX y conviértelo a otros formatos con el convertidor de colores, crea colores que combinen con el generador de paletas o comprueba con el comprobador de contraste si un texto en ese color se lee bien.
Fuentes y base legal
- MDN Web Docs – CanvasRenderingContext2D: getImageData()
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
Última actualización:
Herramientas relacionadas
- Convertidor de colores: HEX, RGB, HSL, HSV, CMYKConvierte colores de HEX a RGB, de RGB a HEX, HSL, HSV, HWB y CMYK: escribe el color en cualquier formato o elígelo y copia el resultado. En tu navegador.
- Generador de paletas de coloresCrea colores que combinan a partir de un color base: complementarios, análogos, triádicos, cuadrado, complementario dividido o monocromo, con HEX, RGB y HSL.
- Comprobador de contraste según WCAG 2.2Comprueba el contraste entre el color del texto y el del fondo: relación de contraste WCAG 2.2, niveles AA/AAA para texto normal, texto grande y componentes.
- Calculadora de 1RM (repetición máxima)Calcula tu 1RM a partir del peso y las repeticiones con las fórmulas de Epley y Brzycki, con tabla de %1RM de 1 a 10 repeticiones. En kg o lb.
- Calcula cuánta agua necesitas al día¿Cuánta agua beber al día? Ingesta de bebidas y agua total según edad, sexo, embarazo y lactancia, con los valores de referencia de la EFSA y de la DGE alemana.
- Calculadora de calorías quemadas haciendo ejercicioCalcula las calorías quemadas en 30 deportes y actividades a partir del MET, el peso y la duración, según el Compendium 2024, con corrección personal opcional.