Selector de Color de Imagen
Elegí el color de cualquier pixel de una imagen y extraé su paleta de colores dominantes. Tu imagen nunca sale de tu navegador, no se sube nada.
Soltá una imagen acá, pegala con Ctrl+V / Cmd+V o elegí un archivo
Cargá una imagen para ver sus colores
Cargá una imagen para ver sus colores
¿Qué es un selector de color de imagen?
Un selector de color de imagen lee el color exacto de un pixel de una foto, captura o logo, para que lo reutilices en CSS o en una herramienta de diseño sin adivinar. Este además extrae los colores dominantes de la imagen con el algoritmo median cut: divide una y otra vez los pixeles en grupos de colores parecidos y promedia cada grupo, lo que da una paleta que refleja cuánto de la imagen ocupa cada color. Una lupa como el cuentagotas de las herramientas para developers del navegador amplía los pixeles alrededor del puntero para que aciertes el exacto, con el mouse, arrastrando el dedo en el celular o con las flechas del teclado. La imagen se decodifica y analiza enteramente en tu navegador y nunca se sube a ningún lado.
Ejemplos
Leer colores de pixeles y paletas de una imagen en código y desde la terminal:
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
const [r, g, b, a] = ctx.getImageData(x, y, 1, 1).data;from PIL import Image
img = Image.open("photo.jpg").convert("RGB")
r, g, b = img.getpixel((x, y))
palette = img.quantize(colors=8).getpalette()[:24]magick photo.jpg -colors 8 -format %c histogram:info:- | sort -rn# Digital Color Meter (built in) shows the color under the cursor:
open -a "Digital Color Meter"Casos de uso
Sacar el color de marca de un logo
Cuando lo único que tenés es un PNG del logo, hacé click en su color principal para obtener el valor HEX exacto para tu hoja de estilos.
Armar una paleta a partir de una foto
Extraé los colores dominantes de una foto de producto o de un moodboard como punto de partida para el esquema de colores de una página.
Recrear un diseño desde una captura
Tomá los colores de fondo, texto y acento directamente de una captura del sitio o la app que tenés que igualar.
Verificar colores en assets exportados
Comprobá que un ícono o banner exportado mantuvo los colores correctos después de la compresión o de una conversión de perfil de color.