Image Color Picker
Image Color Picker — se ejecuta en el navegador. No se guardan datos.
Selector de color de imagen
Sube una imagen y haz clic en un píxel para ver HEX y RGB.
Introduce los valores y pulsa Calcular.
Cómo usar
- En Imagen, elige un archivo para muestrear. Se dibuja una vista previa en el lienzo.
- Haz clic en el píxel que quieras. Una cruz ayuda a apuntar.
- En el resultado, revisa HEX, RGB, la posición (x, y) y la muestra.
- Si hace falta, Copiar HEX pone #rrggbb en el portapapeles.
- Restablecer vacía el archivo y el resultado. La imagen no se envía a un servidor.
Conceptos clave
El muestreo de color de imagen lee un píxel en las coordenadas del clic con canvas getImageData. HEX son seis dígitos hex, RGB tres valores 0–255 y la posición coordenadas de píxel del lienzo. La vista previa puede encogerse hasta 900 px de ancho, así que las coordenadas pueden no ser 1:1 con el original. Los clics en pantalla se mapean a coordenadas del lienzo del tamaño mostrado. Si el archivo falla, un aviso dice que no se puede leer la imagen. Antes de un clic, HEX está vacío y copiar no hace nada. La muestra se rellena con el HEX elegido.
Si solo necesitas una paleta, usa el selector de color; si solo conviertes números RGB↔HEX, usa el conversor; para quitar un fondo sólido, usa transparencia de fondo PNG. Esta herramienta sirve para muestrear colores de marca en fotos y capturas. Los archivos se abren solo en el navegador. Para CSS, Copiar HEX es lo más rápido. Para lienzo o shaders que necesitan RGB, copia el campo del medio. Las coordenadas son relativas al lienzo escalado y pueden diferir de los píxeles originales de Photoshop.
Ejemplo
Sube un PNG de logotipo y haz clic en una zona azul: HEX puede ser #1a5cff, con RGB y coordenadas. Copia HEX a una variable CSS. También puedes usar la misma imagen en la herramienta de transparencia para clics de fondo. Los bordes JPEG comprimidos se difuminan, así que haz clic en puntos cercanos varias veces para comparar. Muestrear el color de un botón en una captura de UI para igualar un token de diseño es un uso típico. Incluso la misma familia de azul puede diferir 1–2 HEX en píxeles JPEG adyacentes.
Relacionado: Selector de color · Conversor RGB HEX · Transparencia de fondo PNG
Preguntas frecuentes
¿El muestreo de color de imagen usa un clic de píxel?
Sí. Tras subir un archivo, haz clic en un punto de la vista previa. Hasta entonces, los clics no cambian el color. Tras cambiar la imagen, el HEX anterior puede quedar: haz clic otra vez. Restablecer es lo más seguro.
¿Aparecen juntos HEX, RGB y coordenadas?
Sí. Tres campos —HEX, RGB, posición (x, y)— más una muestra. No se muestra alfa (transparencia). El campo de posición sirve para depurar, por ejemplo localizar a groso modo un icono en una hoja de sprites.
¿Hay botón Copiar HEX?
Sí. Cuando HEX está relleno, Copiar HEX lo pone en el portapapeles. Antes de un clic no se copia nada. Copiar apunta solo a HEX. Arrastra la cadena RGB desde su campo.
¿En qué se diferencia del selector de color?
El selector elige un color arbitrario y puede mostrar HSL. Esta pantalla lee un píxel real de imagen y sus coordenadas. Si necesitas HSL, pega el HEX copiado en el campo HEX del selector de color.
¿Se sube la imagen a un servidor?
No. Se lee solo en un lienzo local. Restablecer vacía la vista previa. Incluso originales grandes se limitan a una vista previa de 900 de ancho, suele bastar para muestras de color.
¿Las coordenadas son precisas en una vista previa escalada?
Los clics convierten el tamaño en pantalla a píxeles del lienzo. Si el ancho se redujo a 900, las coordenadas son relativas al lienzo escalado. Un clic en un píxel transparente da el color guardado sin componer un fondo. El alfa se descarta.
Última revisión: 2026-09-04