Color
Extraer la paleta de una imagen
Arrastra una foto y salen sus colores dominantes con el porcentaje que ocupa cada uno. De dos a doce colores, cada uno con su valor listo para copiar. La imagen no sale de tu navegador.
Tus imágenes y tus colores no salen de esta página.
Por qué importa que esto no se suba
Dos de estas cuatro herramientas trabajan con imágenes, y lo que se arrastra aquí casi nunca es una foto cualquiera: es el logotipo de un cliente antes del lanzamiento, una captura de un panel interno o una foto de producto sin publicar. Mandarla al servidor de un desconocido para sacarle un color es un intercambio malo, y encima innecesario: leer los píxeles de una imagen no necesita ningún servidor, lo hace el propio navegador con el lienzo que ya trae. Aquí no hay a dónde enviarla.
Para qué la usa la gente
- Sacar la paleta de una foto de productoPara que la ficha, el fondo y los botones vayan a juego con lo que se ve.
- Empezar una identidadUna foto de referencia, su paleta, y a partir de ahí construir.
- Elegir el fondo de una presentaciónUn color que ya está en la imagen siempre queda mejor que uno traído de fuera.
- Igualar una capturaReproducir los colores de una interfaz de la que solo tienes una imagen.
- Documentar una marca ajenaSacar los colores de un logotipo que te han mandado en JPG, sin el archivo original.
- Ver si una foto encajaComprobar de un vistazo si los tonos de una imagen pegan con tu paleta.
Cómo se sacan los colores
Lo que no funciona es lo primero que se le ocurre a cualquiera: hacer la media de todos los píxeles. La media de una foto con cielo azul y arena dorada no es ni azul ni dorada, es un gris pardo que no está en ninguna parte de la imagen.
Lo que se hace aquí es partir el espacio de color en cajas, quedarse con el centro de cada una y luego afinar: cada píxel se asigna al color más parecido y cada color se recoloca en el centro de los suyos, unas cuantas veces, hasta que dejan de moverse. Eso hace que los colores que salen sean colores que están de verdad en la foto, y no medias entre dos.
El porcentaje que se muestra es el de píxeles que se parecen más a ese color que a ningún otro. Es una medida de presencia: cuánta superficie de la imagen ocupa ese tono, no cuántas veces aparece ese valor exacto.
Cuántos colores pedir
Con tres o cuatro sale la esencia de la imagen: sirve para una paleta de marca o para elegir el color de un fondo. Con seis u ocho aparecen los matices y los tonos intermedios, que es lo que hace falta si vas a ilustrar o a hacer una composición. Por encima de diez suelen empezar a salir variantes muy parecidas entre sí.
Si pides más colores de los que la imagen tiene de verdad, salen los que hay y ya: una imagen de tres colores planos da tres, aunque le pidas doce.
Un apunte sobre las fotos
La imagen se reduce antes de analizarla, a unos 500 píxeles de lado. No es un recorte ni afecta al resultado: los colores dominantes de una foto son los mismos a tamaño completo que reducida, y hacerlo así permite que el análisis sea instantáneo aunque arrastres una foto de veinte megapíxeles.
Preguntas frecuentes
¿Se sube mi foto a algún servidor?
No. La imagen se lee con el lienzo del propio navegador y el análisis ocurre ahí dentro. No hay cuentas, no hay base de datos y no hay ninguna petición que lleve tu foto a ninguna parte.
Importa porque lo que se arrastra aquí suele ser una foto de producto sin publicar, el logotipo de un cliente o una captura de algo interno. Con la página cargada, desconecta internet y compruébalo.
¿Qué significa el porcentaje?
Cuántos píxeles de la imagen se parecen más a ese color que a ningún otro de la lista. Es una medida de presencia: cuánta superficie ocupa ese tono.
No es cuántas veces aparece ese valor exacto, que en una foto real sería casi siempre cero: en una fotografía prácticamente no hay dos píxeles idénticos.
¿Por qué no salen los colores que yo veo?
Lo más habitual es que estés mirando un detalle pequeño y muy saturado —un objeto rojo en una esquina— que ocupa poca superficie. El extractor ordena por presencia, así que ese rojo aparecerá abajo o no aparecerá si pides pocos colores.
Prueba a subir el número de colores, o usa el lector de color del selector, que te deja coger el píxel exacto que quieras.
¿Cuántos colores conviene pedir?
Tres o cuatro para la esencia de la imagen, que es lo que sirve para una paleta de marca. Seis u ocho si necesitas los matices intermedios para ilustrar o componer.
Por encima de diez suelen aparecer variantes muy parecidas entre sí. Y si pides más de los que la imagen tiene, salen los que hay: una imagen de tres colores planos da tres.
¿Vale cualquier formato de imagen?
PNG, JPG, WebP, GIF, AVIF y BMP, hasta 30 MB. Si la imagen tiene transparencia, las zonas transparentes no se cuentan: solo aportan color los píxeles que se ven.
Las otras herramientas de color
Selector y conversor
Rueda de color y los valores en HEX, RGB, HSL, HSV, CMYK y nombre CSS, sincronizados. Con lector desde una foto.
Generador de paletas
La escala del 50 al 900 y las cinco combinaciones clásicas, listas para copiar como CSS, Tailwind, JSON o imagen.
Comprobador de contraste
La razón de contraste, los niveles AA y AAA, y el color más parecido que sí cumple cuando el tuyo no llega.