¿Por qué empezar una paleta desde una fotografía?
Casi todos los esquemas de color que “funcionan” tienen una referencia detrás: un paisaje, un tejido, un producto, un fotograma. Las fotografías son buenos puntos de partida porque el mundo físico ya resuelve la parte difícil: los colores de una escena real comparten la misma luz, y por eso encajan entre sí de una manera que cinco valores HEX elegidos al azar nunca lograrán. El sol calienta cada superficie que toca; un cielo cubierto las enfría; una sola lámpara ata toda una habitación a un mismo tono. Tomar prestado de una foto es tomar prestada esa coherencia gratis.
El problema es que “sacar los colores de una foto” es más vago de lo que parece. Una foto tiene cientos de miles de colores distintos, casi todos a un artefacto JPEG de distancia entre sí, y los que tu ojo considera importantes rara vez son los que cubren más píxeles. Esta guía recorre el proceso completo: elegir una foto que produzca una paleta útil, entender qué calcula de verdad un extractor de paletas, decidir qué colores son tu base y cuáles tus acentos, comprobar armonía y contraste y, por último, exportar el resultado a algo que un desarrollador o una imprenta puedan usar. Cuando ayuda, usamos nuestro propio generador de paleta de colores desde una imagen, que se ejecuta íntegramente en tu navegador, pero el razonamiento vale para cualquier extractor.
Paso 1: elige una foto que pueda convertirse en paleta
No toda buena fotografía da una buena paleta. Las propiedades que importan son distintas de las que hacen que una imagen merezca un marco:
- Un reparto de colores limitado y deliberado. Un primer plano de una puerta oxidada contra una pared turquesa da dos tonos fuertes y sus matices. Un mercado callejero abarrotado da cuarenta. Los extractores resumen: cuantos más colores haya, más cosas promedia el resumen que tú no querías promediar.
- Luz coherente. La iluminación mixta —tungsteno dentro, luz de día por la ventana— parte cada superficie en dos colores y produce una paleta que pelea consigo misma. La hora dorada, los días nublados y la luz de estudio de una sola fuente producen paletas que se sostienen.
- Contraste suficiente para tener un oscuro y un claro. Un esquema de interfaz usable necesita al menos un color que se lea como “tinta” y otro que se lea como “papel”. Una foto toda de medios tonos te dará cinco variaciones del mismo valor medio y nada con lo que escribir texto.
- Un acento que te importe. Si la razón por la que te encanta la foto es el diminuto kayak naranja sobre el lago gris, asume de antemano que el kayak son unos cientos de píxeles y el lago unos cientos de miles: tendrás que ir a buscarlo a propósito (más adelante te contamos cómo).
El recorte es tu primera herramienta. Recortar a la parte de la foto que tiene los colores que quieres elimina el aparcamiento de la esquina y el cielo blanco que de otro modo se comería dos huecos. Y una copia reducida basta: un extractor que trabaja sobre una versión de 512 px ve los mismos colores que uno que trabaja sobre el original de 24 megapíxeles, solo que más rápido.
Paso 2: entiende qué está haciendo de verdad el extractor
Las herramientas de paletas difieren más de lo que sugieren sus tiras de muestras tan parecidas, y saber cuál estás usando te dice cómo leer su resultado. A grandes rasgos hay tres familias.
Histograma por celdas
El método más simple trocea RGB en una rejilla gruesa (digamos 8×8×8 celdas), cuenta los píxeles de cada una e informa de las más llenas. Es rápido, pero una zona grande y plana —cielo, pared, fondo— se reparte entre celdas vecinas y se queda con varios huecos con tonos casi idénticos, mientras que un motivo pequeño y vivo nunca llena una celda lo bastante como para aparecer.
Median-cut y octree
Los cuantizadores clásicos de la era del GIF y los 8 bits dividen repetidamente el cubo de color en cajas ponderadas por número de píxeles. Son mejores que las celdas y son lo que muchos editores de imagen usan para “reducir a N colores”, pero siguen trabajando en RGB, donde la distancia numérica es un mal sustituto de lo distintos que se ven dos colores, y siguen favoreciendo el área frente a la relevancia.
Agrupación k-means en un espacio perceptual
El enfoque que usa nuestro generador de paletas convierte cada píxel opaco a CIELAB, un espacio de color diseñado para que la distancia en línea recta se aproxime a la diferencia percibida, y después ejecuta k-means: coloca el número pedido de centros con la siembra k-means++ (cada nueva semilla se elige con probabilidad proporcional al cuadrado de su distancia a las ya colocadas, de modo que los puntos de partida se reparten entre los colores presentes) y repite dos pasos —asignar cada píxel a su centro más cercano, mover cada centro a la media de sus píxeles— hasta que los centros dejan de moverse. Cada centro final es una muestra, y su porcentaje es simplemente la fracción de píxeles que acabaron en ese grupo. Como la siembra aleatoria usa una semilla fija, la misma foto con los mismos ajustes da siempre la misma paleta.
Merece la pena interiorizar dos consecuencias. Primera: cada muestra es una media. Nadie pintó ese HEX exacto; es el centro de una nube de píxeles parecidos. Es lo que quieres para un esquema (las medias son más suaves y utilizables que cualquier píxel ruidoso), pero implica que la fotografía de un logo impreso no devolverá el color de especificación de la marca: la iluminación y la compresión ya lo han desplazado. Segunda: el algoritmo sigue al área. Un centro va donde están los píxeles, así que una foto que es sobre todo lago gris seguirá dando una paleta cargada de grises. Lo que k-means en Lab hace mejor que las celdas es negarse a gastar tres huecos en tres grises que tu ojo no distingue: los fusiona y entrega los huecos liberados a colores realmente distintos, lo que a menudo basta para que un acento pequeño gane uno.
La transparencia merece una nota. En un PNG con fondo transparente los píxeles vacíos no tienen color con sentido, y un extractor que los cuenta informará de un negro o un blanco fantasma. Una buena herramienta descarta los píxeles por debajo de un umbral de alfa antes de agrupar y calcula los porcentajes solo sobre los opacos. La nuestra lo hace por defecto; desactívalo solo cuando la transparencia forme parte del diseño que quieres representar.
Paso 3: los colores dominantes no son los colores importantes
Lee la columna de porcentaje, no solo las muestras. Un paisaje típico da algo así: azul cielo 38 %, gris medio de nube 24 %, verde oscuro de arboleda 19 %, arena cálida 15 % y un 4 % de naranja de una chaqueta. En términos de esquema, esos cinco colores juegan papeles muy distintos:
| Papel | Porcentaje típico | Dónde va |
|---|---|---|
| Base / fondo | 30–60 % | Fondo de página, superficies grandes, tarjetas |
| Superficie secundaria | 15–30 % | Barras laterales, filas alternas, bandas de sección |
| Texto / tinta | 10–20 % (o buscado a propósito) | Texto de cuerpo, iconos: debe ser lo bastante oscuro o claro para el contraste |
| Acento | 1–8 % | Botones, enlaces, resaltados, lo único que quieres que se note |
El acento es el color que con más probabilidad falta en una paleta automática, y el que menos te puedes permitir perder. Tres soluciones, por orden de preferencia:
- Sube la cantidad. Pedir 8 o 10 colores en vez de 5 libera huecos para los grupos pequeños. Siempre puedes descartar después los grises sobrantes.
- Recorta al acento y haz una segunda extracción; toma su color dominante como acento.
- Usa el cuentagotas. Nuestra herramienta permite hacer clic en cualquier punto de la vista previa para añadir el color exacto de ese píxel como muestra manual, sin promediar. Es lo adecuado para el punto de un logo o el brillo de un ojo.
Al revés, la dominancia también puede engañar. Una foto de producto sobre un fondo blanco es un 70 % blanco, y el blanco no forma parte de la identidad del producto: es embalaje. Trata los neutros con mucho porcentaje como candidatos a fondo, no como “el color de la marca”, y deja que la segunda y la tercera muestra lleven la personalidad.
Paso 4: comprueba la armonía (sin obsesionarte)
La teoría del color tradicional describe los esquemas por dónde se sitúan sus tonos en el círculo cromático. Los esquemas complementarios emparejan tonos aproximadamente opuestos (azul y naranja, rojo y verde); los análogos usan vecinos (amarillo, amarillo verdoso, verde); los triádicos reparten tres tonos a distancias iguales; los monocromáticos usan un solo tono a varios niveles de luminosidad y saturación. Son categorías descriptivas, no leyes —muchas paletas preciosas no encajan en ninguna—, pero sirven como comprobación rápida de un conjunto extraído.
La forma práctica de comprobarlo es ordenar la paleta por tono y leer los valores H de la notación HSL. Un paisaje resulta a menudo complementario sin que nadie lo planeara: cielo y agua se sitúan cerca de 200–220°, arena y roca al sol cerca de 30–40°, y esa separación de 180° es justo la razón de que la escena pareciera equilibrada. Si tu extracción devuelve tonos repartidos cada 40° sin estructura, suele significar que la foto tenía luz mixta o demasiados motivos: vuelve al paso 1 y recorta, en lugar de forzar los números.
Ordenar por luminosidad responde a otra pregunta: ¿tiene la paleta un rango real de oscuro a claro? Un esquema con todos sus valores L entre 40 y 60 se verá embarrado en pantalla por bonitos que sean los tonos. Si es el caso, conserva los tonos y fabrica tú el rango: lleva tu tono base a HSL, baja L a 15–20 para un color de tinta y súbelo a 95–97 para un color de papel. Ese es el sentido de tener HSL en cada muestra: te permite derivar tintes y sombras sin cambiar el tono.
Paso 5: conviértela en algo que puedas entregar
Una paleta que vive en una captura de pantalla es decoración. Una paleta que vive en un archivo es un token de diseño. Los formatos que importan, más o menos por frecuencia de uso:
- Propiedades personalizadas de CSS. Un bloque de líneas --palette-1: #…; dentro de :root. Renómbralas semánticamente antes de hacer commit (--color-bg, --color-ink, --color-accent): los nombres numerados se pudren en cuanto reordenas la paleta.
- Variables SCSS. La misma idea para proyectos con Sass.
- Tailwind. Un objeto theme.extend.colors con claves 100/200/300… se pega en tailwind.config.js; en Tailwind v4 los mismos HEX pasan a ser líneas --color-* dentro de un bloque @theme, según la documentación del tema de Tailwind. Ojo: la escala numerada de una exportación genérica es una lista, no una rampa de tintes real; para una rampa 50–950 de verdad deriva los pasos de un solo tono en HSL.
- JSON. El formato de intercambio neutro para canalizaciones de tokens de diseño y para pasarle una paleta a un script.
- .gpl de GIMP. Un archivo de paleta en texto plano (cabecera GIMP Palette, un nombre y filas R G B nombre) que GIMP, Inkscape, Krita y Aseprite importan directamente, documentado en el manual del diálogo de paletas de GIMP. Si tu paleta va a ilustración o pixel art y no a una web, este es el que quieres.
- Una tarjeta PNG de la paleta. Para el moodboard, la presentación al cliente o la publicación en redes: las muestras con su HEX impreso encima.
Nuestro extractor escribe todos estos formatos a partir de las mismas muestras, y los valores HEX, RGB y HSL de cada una se copian con un clic para cuando solo necesitas un número en Figma o Sketch. Uses la herramienta que uses, la regla es la misma: exporta una vez, nombra semánticamente y nunca vuelvas a teclear un HEX a mano.
Paso 6: comprueba el contraste antes de comprometerte
Una paleta puede ser armoniosa y aun así inutilizable, porque la armonía no dice nada de la legibilidad. El ratio de contraste de WCAG 2.1 es la medida estándar: compara la luminancia relativa de dos colores y produce un número de 1:1 (idénticos) a 21:1 (negro sobre blanco). WCAG pide al menos 4,5:1 para texto de cuerpo normal y 3:1 para texto grande y componentes de interfaz. Las paletas extraídas de fotos suspenden esta prueba más a menudo que las elegidas a mano porque las fotografías están llenas de medios tonos: la arena y el cielo pueden verse preciosos juntos a 2,1:1 y ser ilegibles como texto sobre fondo.
Haz la comprobación pronto. Nuestra herramienta imprime la etiqueta de cada muestra en negro o blanco, el que tenga mayor contraste WCAG contra ese color; una muestra que recibe etiqueta blanca te está diciendo que el texto negro sobre ella fallaría antes que el blanco. Es una pista de triaje, no una auditoría completa —pasa tus pares finales de texto/fondo por un verificador de contraste de verdad—, pero separa rápido los colores que pueden llevar texto de los que son solo fondo. Cuando una pareja favorita suspende, conserva el tono y mueve la luminosidad: bajar diez puntos la L del color de tinta en HSL suele bastar, y conserva el carácter de la foto mucho mejor que cambiar el color por completo.
Más allá de la pantalla: impresión, pintar por números y pixel art
Las paletas extraídas de fotos son igual de útiles lejos del CSS. Dos de las herramientas de esta misma sección usan exactamente el mismo cuantizador k-means en Lab, así que la paleta que extraigas aquí es la paleta con la que ellas pintarán:
- Pintar por números. Un kit de pintar por números es una paleta reducida más regiones. Extraer la paleta primero te dice cuántas pinturas necesita de verdad una foto y te permite cambiar un medio tono incómodo por uno que sí puedas mezclar; nuestra guía sobre una paleta de colores personalizada para pintar por números cubre el flujo de trabajo, y el generador de pintar por números acepta el resultado.
- Pixel art. Las paletas reducidas son la esencia del pixel art, y la diferencia entre 8 y 16 colores cambia todo el aspecto. Empieza por cómo convertir una foto en pixel art, sigue con tramado: Floyd–Steinberg frente a ordenado para entender por qué una paleta pequeña obliga a elegir un tramado, y exporta el .gpl para que Aseprite pinte con los mismos colores.
- Impresión. Los HEX de pantalla son sRGB; una imprenta trabaja en CMYK y no puede reproducir todos los colores de pantalla, sobre todo los azules y verdes saturados. Cuando una paleta va a imprenta, cuenta con que la prueba del impresor será más apagada que el monitor y trata los valores extraídos como objetivos a igualar a ojo, no como especificaciones absolutas.
Errores habituales (y su solución)
- Fiarse de la primera muestra como “el color”. El grupo mayor suele ser fondo o cielo. Solución: lee los porcentajes como papeles —base, superficie, tinta, acento— y elige el color de identidad en el segundo escalón o en el acento.
- Extraer de una foto de un logo para recuperar el HEX de marca. La iluminación y la compresión lo han alterado. Solución: usa el vector o el manual de marca; si solo tienes un PNG plano, fija la cantidad al número de colores planos o usa el cuentagotas.
- Dejar que un fondo transparente entre en el recuento. Solución: mantén activado “ignorar píxeles transparentes” con logos y pegatinas.
- Pedir demasiado pocos colores. Cinco es un esquema, no un inventario. Solución: extrae a 8–10 y luego depura hasta tus papeles.
- Saltarse la comprobación de contraste. Solución: prueba los pares texto/fondo a 4,5:1 antes de que la paleta llegue a una biblioteca de componentes.
- Nombres de token numerados. --palette-3 no significará nada el trimestre que viene. Solución: renombra a tokens semánticos el mismo día que exportas.
- Comparar herramientas y suponer que una está “mal”. Cuantizadores distintos dan medias distintas de la misma imagen continua; ninguna es la verdad absoluta. Solución: elige un método, conserva sus ajustes y apóyate en su determinismo para la reproducibilidad.
Un ejemplo completo, de principio a fin
Toma una foto de costa a la hora dorada: arena cálida en primer plano, mar gris azulado, cielo pálido, una bandera roja de socorrista. Recortar el cielo (un quinto del encuadre y gris claro puro) deja arena, mar y bandera. Extraer en Auto sugiere cuatro colores; extraer a 8 devuelve dos arenas, tres tonos de mar, un marrón oscuro de roca mojada, una espuma pálida y —al 2 %— el rojo de la bandera. Ordenar por tono muestra las arenas cerca de 35°, los mares cerca de 205° y el rojo cerca de 358°: un par complementario más un acento caliente. Ordenar por luminosidad muestra que el rango va de L 22 (roca mojada) a L 88 (espuma), así que hay una tinta y un papel utilizables.
Depurando: la espuma pasa a ser --color-bg, la arena más clara --color-surface, el marrón de roca mojada --color-ink (supera 4,5:1 sobre la espuma), el mar medio --color-primary y el rojo de la bandera --color-accent para botones, con su etiqueta en blanco, así que el texto de los botones va en blanco. Exporta como propiedades personalizadas de CSS, renombra, commit. Diez minutos, y cada color del sitio estuvo de verdad en esa playa a esa hora, que es exactamente por lo que se verá coherente.
Resumen
Una buena paleta fotográfica es el producto de elegir una imagen con un reparto limitado y luz coherente, entender que un extractor devuelve medias perceptuales ponderadas por área, leer los porcentajes como papeles y no como ranking, ir a buscar el acento a propósito, comprobar la estructura de tonos y el rango de luminosidad, probar el contraste y exportar una sola vez a tokens semánticos. Haz eso y la paleta parecerá venir de algún sitio real, porque así es.