Selector de color de imagen
Elige colores de cualquier imagen haciendo clic en un píxel. Una lupa muestra los píxeles exactos y obtienes valores HEX, RGB y HSL, más un historial de colores.
Se ejecuta completamente en tu navegador. Tus datos nunca se suben.
Herramientas Relacionadas
Ver Todas¿Qué es Selector de color de imagen?
Sube o pega una imagen y haz clic en cualquier punto para leer el color exacto de ese píxel en HEX, RGB (o RGBA si es semitransparente) y HSL. Una lupa muestra los píxeles alrededor del cursor, los campos X/Y te permiten apuntar a un píxel exacto y cada color elegido se guarda en un historial en el que se puede hacer clic.
Cómo usar Selector de color de imagen
- Suelta, elige o pega una imagen (funciona bien una captura pegada con Ctrl+V).
- Mueve el puntero sobre la imagen para ver la vista ampliada y haz clic para elegir un color.
- O escribe las coordenadas exactas X e Y del píxel.
- Haz clic en un valor HEX, RGB o HSL para copiarlo; reutiliza colores anteriores desde Colores elegidos.
Ejemplo
Imagen de 40×20 cuyo cuadrante superior derecho es verde puro, píxel X=25, Y=5
#00FF00 · rgb(0, 255, 0) · hsl(120, 100%, 50%)
Cuándo usar Selector de color de imagen
Úsalo para igualar un color de marca a partir de un logotipo o una captura, tomar muestras de color de una foto para un diseño o comprobar el color exacto de un elemento de la interfaz. Ten en cuenta que la compresión JPEG y el antialiasing cambian ligeramente los colores de los píxeles, así que toma muestras de zonas planas y no de los bordes. Para obtener una paleta completa de una vez, usa Paleta de colores de una imagen.
Cómo funciona Selector de color de imagen
La imagen se dibuja en un canvas a resolución completa y sus píxeles se leen una vez con getImageData. Un clic se traduce de coordenadas de pantalla a coordenadas de píxel de la imagen, y el valor RGBA de ese índice se convierte a HEX y HSL (tono en grados, saturación y luminosidad en porcentaje). La lupa vuelve a dibujar un entorno de 11×11 píxeles sin suavizado.
Casos de Uso Comunes
- Encontrar el código HEX de un color de marca en un logotipo.
- Tomar un color de una captura de una web para reutilizarlo en CSS.
- Comprobar si dos elementos de la interfaz usan realmente el mismo color.
- Reunir colores de una foto para un moodboard.
Nota de Seguridad
Las imágenes se decodifican, procesan y codifican en local en tu navegador con la API Canvas. No se sube nada a ningún servidor.
Preguntas Frecuentes
¿Por qué el color difiere un poco de lo que esperaba?
Los formatos con pérdida como JPEG y el suavizado de los bordes alteran los valores de los píxeles. Elige desde el centro de una zona plana o usa los campos X/Y para seleccionar un píxel exacto.
¿Funciona con imágenes transparentes?
Sí. Los píxeles semitransparentes se muestran como rgba() con su valor alfa; el valor HEX muestra la parte RGB.
¿Puedo elegir colores fuera del navegador?
No, solo de la imagen que cargues. Haz una captura de pantalla y pégala con Ctrl+V para elegir colores de cualquier cosa de tu pantalla.