La imagen se lee en tu navegador y nunca se sube. Solo se recuerdan el número de colores y el formato de exportación.
Integra esta herramienta en tu web
Gratis y sin cuenta: copia el código y pégalo en tu web, tu blog o tu documentación.
Sobre el extractor de colores
Descubre de qué colores está hecha una imagen. Suelta una foto, una captura o un logo y el extractor agrupa sus píxeles en una paleta de colores dominantes, cada uno con su código HEX, RGB y HSL y la parte de la imagen que ocupa. Pasa el cursor por la imagen para ampliarla y haz clic para elegir el color exacto de un píxel.
Cómo usar el extractor de colores
-
Añade una imagen
Suelta una imagen en la página, haz clic para elegir un archivo o pega una que hayas copiado, como una captura, con Ctrl+V (⌘V en Mac).
-
Ajusta la paleta
Usa el control Colores para obtener entre 3 y 12 colores dominantes. Haz clic en un código HEX, RGB o HSL para copiarlo.
-
Elige colores exactos y exporta
Haz clic en cualquier punto de la imagen para añadir el color de ese píxel a Colores elegidos. Después copia la paleta desde Exportar como variables CSS, JSON o HEX.
Casos de uso
Los colores de marca de un logo
Obtén los códigos HEX exactos de un logo cuando nadie encuentra el manual de marca: los colores planos salen con el mismo código que en el archivo.
Una combinación de colores a partir de una foto
Convierte una foto que te guste en una paleta para una web, una presentación o una ilustración, lista para pegar como variables CSS.
Igualar un diseño
Pega una captura de una aplicación o de una página web y elige el color de un botón, un fondo o un texto para reproducirlo.
Preguntas frecuentes
¿Cómo se eligen los colores dominantes?
La imagen se reduce a 200 px en su lado largo, los píxeles parecidos se agrupan y un agrupamiento k-means en el espacio de color Oklab, que sigue cómo percibe el ojo las diferencias, encuentra los colores que mejor representan la imagen. La misma imagen con el mismo número de colores da siempre la misma paleta. Un color que llena casi todo su grupo, como el color plano de un logo, se muestra exacto.
¿Por qué falta en la paleta un color que veo?
La paleta da prioridad a los colores que cubren zonas grandes, así que un detalle pequeño, como un botón rojo en una foto grande, puede quedar absorbido por un color vecino. Sube el número de colores o haz clic en el detalle con el cuentagotas para obtener su código exacto.
¿Qué significa el porcentaje de cada color?
Es la parte de la imagen más cercana a ese color. Los píxeles transparentes no se cuentan, y los porcentajes suman 100. Si la paleta tiene menos colores de los que pediste, la imagen tiene menos colores claramente distintos.
¿Qué precisión tiene el cuentagotas?
Lee el píxel que hay bajo el puntero en la imagen a resolución completa (las imágenes de más de unos 16,7 megapíxeles se reducen antes a ese tamaño). En las fotos JPEG los píxeles vecinos suelen variar un poco por la compresión, así que la lupa te ayuda a apuntar. Elegir de la pantalla, en los navegadores que lo admiten, toma cualquier color que se vea en tu pantalla.
¿Se sube mi imagen?
No. La imagen se lee y se analiza en tu navegador con canvas y nunca sale de tu dispositivo. Solo se recuerdan en este navegador el número de colores y el formato de exportación; la imagen y los colores elegidos, no.
Herramientas relacionadas
Explora todas las herramientas online gratis de Tooly: todas funcionan en tu navegador y ninguna necesita cuenta.