Generador de paleta de colores
Extrae los colores de una imagen o compón armonías.
- Instantánea
- Gratis
- Privada (procesada localmente)
- Sin registro
Haz clic en un color para copiar su código
Una paleta profesional en segundos
Toda identidad visual empieza por una paleta. Dos caminos llevan a ella: partir de una imagen que ya tenga el ambiente buscado (foto, moodboard, captura) y extraer sus colores dominantes, o partir de un color de marca y construir sus armonías según la teoría del color.
-
Imagen → paleta
Suelta la imagen: el algoritmo k-means agrupa los píxeles y revela los 6 colores dominantes con su peso.
-
Color → armonías
Elige tu color base: complementario, análogos, tríada y matices se generan al instante.
-
Exporta
Haz clic en un color para copiar su código, o copia todo el bloque de variables CSS / Tailwind.
Las armonías en resumen
| Armonía | Construcción | Efecto |
|---|---|---|
| Complementaria | 2 colores a 180° | Contraste máximo, energía |
| Análogos | 3 colores a ±30° | Suavidad, coherencia natural |
| Triádica | 3 colores a 120° | Equilibrio vivo y colorido |
| Matices | Mismo tono, 5 claridades | Profundidad monocroma, jerarquía |
Regla del 60-30-10: alrededor del 60 % de color dominante, 30 % de secundario, 10 % de acento. Comprueba también el contraste texto/fondo con nuestro verificador WCAG.
Preguntas frecuentes
¿Cómo se extraen los colores de la imagen?
Con un algoritmo de agrupamiento k-means que se ejecuta en tu navegador: los píxeles se agrupan en 6 familias de colores similares, y el centro de cada familia se convierte en un color de la paleta, ordenado por importancia (porcentaje de la imagen).
¿Qué es un color complementario?
El color diametralmente opuesto en el círculo cromático (a 180°). El dúo crea el contraste más fuerte: ideal para hacer destacar un botón de llamada a la acción sobre un fondo.
Análogos, tríada: ¿cuándo usarlos?
Los análogos (±30°) dan ambientes suaves y coherentes — perfectos para fondos. La tríada (3 colores a 120°) ofrece un equilibrio vivo: una dominante, dos acentos.
¿Cómo uso la exportación CSS?
El bloque generado contiene variables CSS (--color-1, --color-2…) para pegar en tu :root, más el equivalente para la config de Tailwind. Renombra las variables según su función (--primary, --accent…) para un código más legible.
¿Mi imagen se envía a algún sitio?
No: el análisis k-means se ejecuta por completo en tu navegador sobre una miniatura de la imagen. Nada se transmite, ni siquiera con fotos grandes.