Paleta de colores a partir de una imagen

Qué es un extractor de paletas de color

Coge una imagen y te devuelve un puñado de colores que la representan, como códigos hex que puedes pegar en una hoja de estilos o en un archivo de diseño. Se usa para construir una gama alrededor de una fotografía, para ajustar los colores de marca a un recurso que ya existe, o simplemente para poner nombre a los colores de algo que te gusta.

Este agrupa los colores en vez de contarlos, que es otro algoritmo con un resultado visiblemente distinto. Además te deja cambiar al método de conteo sobre tu propia imagen y te enseña qué cambia, porque esa comparación es la razón de ser de la página.

Tu imagen la decodifica tu propio navegador y no sale de la máquina. No hay subida, ni servidor, ni cuenta, y aquí importa más que en la mayoría de las herramientas, porque el archivo que entregas suele ser una fotografía.

Cómo usar el extractor de paletas

1. Elige o suelta una imagen. Vale cualquier cosa que tu navegador sepa mostrar: JPEG, PNG, WebP, GIF. Se lee en local y se reduce antes de muestrear, así que una foto grande no va más lenta que una pequeña.
2. Fija cuántas muestras quieres. Entre dos y diez. Cinco es la respuesta habitual para una paleta de diseño; por encima de ocho, los colores empiezan a estar realmente cerca unos de otros en casi cualquier fotografía.
3. Copia los colores y prueba el otro método. Cada muestra se copia por separado o todas de golpe. Merece la pena pulsar el selector de método al menos una vez: el panel de abajo indica lo lejos que están las dos muestras más cercanas con cada enfoque, sobre tu imagen y no en abstracto.

Contar los colores es el algoritmo equivocado

La forma evidente de encontrar los colores dominantes de una imagen es contarlos y quedarse con los más comunes. Lo hace casi cualquier herramienta. Y tiene un problema que solo aparece con fotografías reales.

No se pueden contar los colores directamente, porque una fotografía casi no contiene píxeles exactamente repetidos: de eso se encargan el ruido del sensor y los degradados. Así que primero se cuantiza: se redondea cada píxel a un compartimento grueso y se cuentan los compartimentos. Y después de ese paso, los más poblados son todos vecinos del tono que llena la mayor parte del encuadre. Un paisaje devuelve cinco verdes. Un retrato devuelve cinco tonos de piel. Obtienes cinco muestras de una región en vez de cinco regiones.

El agrupamiento hace otra pregunta. En lugar de «qué colores aparecen más», pregunta «dónde están los grupos», y pone una muestra en cada uno. Los colores que de verdad definen el aspecto de una imagen —el naranja de una puesta de sol que ocupa el cuatro por ciento del encuadre, el único objeto rojo en una calle gris— son justo los que el conteo descarta y el agrupamiento conserva.

Medimos cuánta diferencia supone antes de construir la página, porque si el margen hubiera sido pequeño lo honesto habría sido no publicarla. Sobre veinte fotografías corrientes, tomando la distancia en Oklab entre las dos muestras más parecidas como medida de si una paleta sirve: la mediana del método de conteo fue 0,0308 y la del agrupamiento 0,1410, una mejora mediana de 4,6 veces. El agrupamiento ganó en las veinte, entre 1,4 y 7,2 veces.

Una corrección a lo que esperábamos, porque es la clase de cosa que se repite en cuanto alguien la escribe. La predicción era que el conteo produce tonos apagados casi idénticos. Normalmente no llega a tanto: tomando 0,02 como el punto en el que dos colores dejan de distinguirse, solo una paleta de cada veinte tenía dos muestras tan cercanas. Lo que el conteo produce en realidad son muestras agrupadas, entre cuatro y cinco veces menos separadas de lo que podrían estar, pero no literalmente el mismo color. La herramienta informa del número real y no de la afirmación pegadiza.

Limitaciones honestas

La imagen se reduce y se muestrea en una rejilla antes de agrupar nada. Es deliberado: una fotografía de veinticuatro megapíxeles no necesita que se examine cada píxel para encontrar cinco colores, y agruparlos todos mediría tu paciencia y no la imagen. Sí implica que un detalle muy pequeño pero muy saturado puede perderse si no sobrevive ni a la reducción ni a la rejilla.

El muestreo es determinista, así que la misma imagen da siempre la misma paleta. Vale más de lo que parece: una herramienta que devolviera colores distintos en cada pasada no serviría para elegir algo que luego pegas en una hoja de estilos. El coste es que el resultado depende de la rejilla, y una imagen con un patrón repetitivo fuerte alineado con ella podría en teoría muestrearse mal.

Cada muestra se ajusta a un color que aparece de verdad en la imagen, en lugar de darse como promedio del grupo. El promedio de un grupo es un color que puede no existir en la fotografía, y es raro entregárselo a alguien como «un color de esta imagen». A cambio, la muestra es un píxel real y no el centro matemático de su grupo.

Los píxeles totalmente transparentes se saltan. Incluirlos arrastraría todas las muestras hacia el fondo del lienzo, que es un color de tu navegador y no de tu imagen. Los parcialmente transparentes cuentan tal como se dibujan, que es lo que ves.

El agrupamiento no sabe cuál es el sujeto. Encuentra grupos de color, no aquello que te importa, así que una fotografía con un fondo grande y poco interesante gastará muestras en él en proporción a su tamaño. Si quieres los colores de un objeto, recórtalo antes: la herramienta de recorte de este sitio lo hace y tampoco sube nada. El motor lleva 31 comprobaciones, incluida una imagen sintética cuya respuesta correcta de cinco colores se conoce por construcción.

¿Por qué es gratis?

Decodificar una imagen y agrupar unos miles de píxeles es trabajo que tu propia máquina hace en un momento, y es la única máquina implicada. No se sube nada, así que no hay nada que pagar ni nada que poner detrás de una cuenta.

Si quieres un color y no una paleta, el selector de color de imagen de este sitio te deja pinchar un punto y leerlo. Y si luego quieres trabajar con los colores, el conversor de color y el generador de degradados aceptan los códigos hex directamente desde aquí.