Obtener el color de una imagen (cuentagotas)
Para obtener el color de una imagen, carga la 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.
Fuente: MDN Web Docs – CanvasRenderingContext2D: getImageData(). Actualizado: .
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.
Para seguir: convierte valores con el conversor de colores, busca colores que combinen con el generador de paletas y comprueba la legibilidad con el comprobador de contraste.
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.
¿Qué diferencia hay entre HEX, RGB y HSL?
Los tres describen el mismo color: RGB como rojo, verde y azul de 0 a 255, HEX con esos valores en hexadecimal (#FF0000 = 255, 0, 0) y HSL como tono, saturación y luminosidad.
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: · Principios editoriales
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 de colores 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 IMC según la OMSCalculadora de IMC: índice de masa corporal con estatura y peso, categoría de la OMS en una escala de colores, peso normal para tu estatura y BMI Prime.
- Metrónomo onlineMetrónomo online gratis: 20–300 BPM, compases de 2/4 a 12/8, acento por tiempo, subdivisiones y tap tempo. Precisión de muestra, sin aplicación.
- Calculadora del promedio de bateoCalcula el promedio de bateo (hits ÷ turnos al bate), el OBP, el slugging y el OPS, y la efectividad (ERA) y el WHIP del lanzador según la regla 9.21.
- Percentil bebé: calcula el percentil de peso, talla y cabezaPercentil bebé según la OMS: indica sexo, edad, peso, talla y perímetro cefálico y obtén el percentil, la puntuación z y el rango normal de 0 a 5 años.
- Calculadora de SWOLF en nataciónSWOLF natación: suma el tiempo y las brazadas de un largo o haz la media de una sesión y obtén tu SWOLF, el ritmo por 100 y la distancia por brazada.
- Calculadora de zonas de potencia FTPZonas de potencia FTP para ciclismo: las siete zonas de Coggan en vatios a partir de tu FTP o de un test de 20 minutos, con pulsaciones desde tu umbral.