Extraer la paleta de colores de una imagen

¿Qué es una paleta de colores?

Una paleta de colores es el conjunto reducido de tonos que definen el aspecto de una imagen o de una marca. Extraer la paleta de una foto te permite reutilizar exactamente esos colores en un diseño, una web, una presentación o una decoración, consiguiendo un resultado coherente y armonioso.

Diseñadores, desarrolladores web, creadores de contenido o cualquiera que quiera combinar colores con criterio usan este tipo de herramientas a diario: para crear la identidad de un proyecto a partir de una fotografía inspiradora, para adaptar una web a los colores de un logotipo o simplemente para saber qué código tiene un color concreto.

Cómo extraer los colores de una imagen

1. Sube la imagen arrastrándola a la zona superior, eligiéndola o pegándola con Ctrl+V.
2. Revisa la paleta: aparecen los colores dominantes ordenados por la proporción de la imagen que ocupan.
3. Ajusta el número de colores con el deslizador, entre 3 y 12.
4. Haz clic en un color para copiar su código HEX. También puedes copiar toda la paleta, copiarla como variables CSS o descargarla como imagen PNG.
5. Usa el cuentagotas: haz clic en cualquier punto de la imagen para obtener el color exacto de ese píxel.

Cómo se calculan los colores

Pasafoto analiza los píxeles de la imagen y aplica el algoritmo de corte por la mediana (median cut), el mismo principio que usan muchos programas de edición para reducir colores. Agrupa los tonos parecidos y calcula el color medio de cada grupo, de manera que la paleta representa los colores realmente presentes en la foto y su peso. Las zonas transparentes se ignoran, así que funciona bien con logotipos en PNG.

HEX, RGB y CSS

• HEX (#1E40AF): el formato más usado en diseño web y en herramientas como Figma o Canva.
• RGB (rgb(30, 64, 175)): indica la cantidad de rojo, verde y azul de 0 a 255.
• Variables CSS: el botón «Copiar CSS» genera un bloque :root listo para pegar en tu hoja de estilos.

Privada y gratuita

La imagen se analiza en tu navegador y no se sube a ningún servidor. Puedes usarla con diseños confidenciales, fotos personales o material de clientes con total tranquilidad.

Ideas para usar tu paleta

Una regla clásica de diseño es la del 60-30-10: un color dominante para el 60 % de la superficie (fondos), uno secundario para el 30 % (bloques, tarjetas) y un color de acento para el 10 % (botones, enlaces). Extrae 5 o 6 colores de una foto que te inspire y reparte los papeles así. Comprueba además el contraste entre el texto y el fondo para que sea legible: los colores muy claros funcionan como fondo y los oscuros como texto. Si trabajas con un logotipo, extrae solo 3 o 4 colores para obtener exactamente los de la marca.