¿Cómo extraigo un color exacto de una imagen (cuentagotas)?
Cuentagotas de imágenes online: suelta una foto, pasa por encima de cualquier píxel y ve el color exacto (HEX, RGB, OKLCH). Pulsa para añadirlo a una paleta.
Diseñado para diseñadores: sacar colores de assets de marca, capturas de la web de la competencia y fotos de producto.
Todo se ejecuta en local: la imagen no sale de tu navegador.
También devolvemos OKLCH (espacio de color perceptualmente uniforme): el estándar CSS moderno desde 2023, usado por Tailwind v4.
Cómo usarlo
- Sube una foto: PNG, JPG, WebP, AVIF, HEIC.
- Pasa el ratón por la imagen: el píxel bajo el cursor se muestra debajo con HEX / RGB y coordenadas.
- Pulsa en cualquier sitio para añadir el color a la paleta de la derecha. Máximo 12 colores: los nuevos desplazan a los antiguos.
- Pulsa cualquier valor HEX / RGB / OKLCH de la paleta para copiar.
Cuándo es útil
Dónde se nota el cuentagotas - escenarios típicos:
- Assets de marca: el cliente te ha enviado un logo PNG y necesitas los colores exactos para CSS.
- Investigación de competencia: captura de la web de un competidor, quieres su azul de acento exacto.
- Fotos de producto: extraer un color representativo de la foto del vestido para componer fondos de la ficha de tienda.
- Diseño de UI: captura exportada desde Figma / Sketch, verifica los colores finales tras el render.
- Flujo OKLCH: si trabajas con color CSS moderno (Tailwind v4, tokens de diseño OKLCH), la herramienta devuelve coordenadas OKLCH listas para pegar.
Preguntas y respuestas
No. Todo se ejecuta en local: la imagen se carga vía Canvas API y el muestreo de píxeles vía `getImageData`. DevTools > Network = ninguna petición.