Paleta de color a partir de una imagen: cómo sacarla de una foto

Para sacar una paleta de color a partir de una imagen buscas tres cosas: los colores dominantes que llenan las zonas más grandes, unos pocos colores de apoyo y uno o dos acentos pequeños y vivos que dan chispa a la imagen. Después tomas cada muestra de una zona y no de un solo píxel, la limpias para que coincida con lo que recuerdas haber visto y compruebas que los colores funcionan juntos. Bien hecha, la paleta se siente como la foto incluso cuando la foto no está.

Esta guía explica cómo hacerlo a mano, qué aciertan y qué fallan las herramientas automáticas y cómo convertir el resultado en un degradado. Para paletas ya hechas de escenas reales, mira las paletas de color de la naturaleza.

Colores dominantes, de apoyo y de acento

Toda foto tiene una jerarquía de color. Imagina un puerto al anochecer: la mayor parte del encuadre es agua azul profundo y un cielo pizarra, una franja de tejados de terracota cálida cruza el medio y unas pocas farolas de sodio brillan en naranja. El agua y el cielo son dominantes, los tejados los apoyan y las luces son el acento. Quita las luces y la paleta pierde su calidez; hazlas dominantes y se convierte en otra imagen.

Anota las proporciones junto a los colores. Una paleta no es solo una lista de códigos hex: los mismos seis colores usados a partes iguales no se parecerán en nada a la foto. La regla 60-30-10 es una buena forma de registrarlas.

Cómo extraer colores de una foto a mano

1. 1

   Desenfoca primero la foto

   Aplica un desenfoque fuerte o, simplemente, entrecierra los ojos. El detalle, la textura y el ruido desaparecen y se ven las zonas de color reales. Muestrear una imagen desenfocada te da medias en lugar de accidentes.

2. 2

   Muestrea zonas, no píxeles

   Usa un cuentagotas con un tamaño de muestra grande, como 11 por 11 píxeles, o elige tres puntos en cada zona y haz la media.

3. 3

   Reúne más de los que necesitas

   Toma de ocho a doce muestras de distintas partes de la imagen, incluidos los detalles brillantes más pequeños.

4. 4

   Agrupa y elige

   Agrupa las muestras parecidas, quédate con la más clara de cada grupo y termina con cinco a siete colores: dos o tres dominantes, dos de apoyo, uno o dos acentos.

5. 5

   Corrige hacia el recuerdo

   Compara cada muestra con la foto a tamaño normal. Si un color se ve apagado o gris junto a lo que recuerdas, sube un poco su croma o ajusta su tono.

6. 6

   Comprueba el contraste

   Asegúrate de que al menos un color claro y uno oscuro de la paleta se lean entre sí para el texto. Mira el contraste de color.

Por qué las muestras del cuentagotas salen turbias

Una foto no está hecha de colores limpios. Un cielo azul son miles de azules ligeramente distintos, las sombras mezclan el color de lo que tienen cerca y la compresión JPEG añade bloques de color promediado. Haz un solo clic y a menudo caerás en un píxel gris pardo que existe en el archivo pero no en tu recuerdo de la escena.

Usar un generador de paletas a partir de una imagen

Las herramientas automáticas reducen la imagen, agrupan píxeles parecidos y devuelven los grupos más grandes. Eso encuentra bien los colores dominantes. El punto débil es el acento: una pequeña luz naranja puede cubrir un uno por ciento del encuadre, así que nunca entra en la lista. Trata el resultado de cualquier generador como un primer borrador y añade los acentos a mano.

// Most common colours in an image, grouped into coarse buckets.
// Finds dominant colours well; add small accents by hand.
async function paletteFromImage(url, count = 6) {
  const img = new Image()
  img.crossOrigin = 'anonymous'
  img.src = url
  await img.decode()
  const size = 64 // shrinking first averages away noise
  const canvas = new OffscreenCanvas(size, size)
  const ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, size, size)
  const { data } = ctx.getImageData(0, 0, size, size)
  const buckets = new Map()
  for (let i = 0; i < data.length; i += 4) {
    const key = ((data[i] >> 4) << 8) | ((data[i + 1] >> 4) << 4) | (data[i + 2] >> 4)
    const b = buckets.get(key) ?? { r: 0, g: 0, b: 0, n: 0 }
    b.r += data[i]; b.g += data[i + 1]; b.b += data[i + 2]; b.n++
    buckets.set(key, b)
  }
  const hex = (v) => Math.round(v).toString(16).padStart(2, '0')
  return [...buckets.values()]
    .sort((a, b) => b.n - a.n)
    .slice(0, count)
    .map((b) => `#${hex(b.r / b.n)}${hex(b.g / b.n)}${hex(b.b / b.n)}`)
}

Convertir la paleta de una foto en un degradado

La forma más fácil de hacer que un degradado se sienta como una foto es mantener los colores en el orden en que aparecen en la escena. Cielo sobre horizonte sobre agua. Hojas sobre fruta sobre tierra. Así el degradado lleva la estructura de la imagen además de sus colores, y la gente percibe la conexión aunque no sepa nombrarla.

Vigila las transiciones entre vecinos. Dos colores que están lejos en la foto, como un tejado cálido y un cielo frío, pueden encontrarse en gris al mezclarse directamente. Pon un color que esté entre ellos en la escena, como el resplandor pálido de arriba, y la mezcla se mantiene limpia. Los degradados turbios explican la regla.

En Gradiently, Igualar una imagen lo hace en un solo paso: suelta una imagen y devuelve la paleta y los Marks existentes más parecidos, o crea Marks nuevos con su sensación. Después puedes diseñar con cualquiera de ellos al instante.