Generador de Paleta de Colores
Genera paletas de colores armoniosas desde cualquier color base. Elige armonía Análoga, Complementaria, Triádica o Tetrádica — exporta como CSS variables o...
Actualizado mayo de 2026
Revisado por Rafael Duarte
Base Color
Harmony Rule
Global Refinement
Assign Roles
Drag swatches → drop on a card · drag cards to swap · to pick any color
Primary
#197FE6
Secondary
#1461B8
Accent
#F59E0B
Background
#FFFFFF
Surface
#F5F7FA
Text
#111827
Build products
your users love
The fastest way to ship your next project with a polished design system and production-ready components.
Popular Palettes
Brand Palettes
Cómo generar una paleta de colores
Un color base, una regla de armonía y cinco tonos listos
1. Elige el color base
Haz clic en el swatch para abrir el selector o escribe directamente un código hexadecimal en el campo.
2. Elige la regla de armonía
Análoga, Monocromática, Complementaria, Triádica o Tetrádica — la paleta se actualiza al instante con cada cambio.
3. Ajusta y exporta
Afina el resultado con los sliders de Saturación y Luminosidad, y exporta como CSS, JSON o PNG.
Qué hace este generador de paletas de colores
Reglas geométricas del círculo cromático, aplicadas de forma automática
5 colores por paleta, siempre
El equilibrio ideal entre variedad y cohesión para la mayoría de los design systems.
Sliders globales de saturación y luminosidad
Mueve toda la armonía a la vez sin romper la relación entre los matices.
Regenerar conservando la regla
Aleatoriza el matiz base manteniendo la armonía y los ajustes actuales, con un historial de las últimas 10 generaciones.
3 formatos de exportación
Variables CSS, JSON con hex/RGB/HSL de cada color, o una tarjeta PNG lista para compartir.
Asignación de roles con detección inteligente
Arrastra cualquier swatch a las tarjetas Primary, Secondary, Accent, Background, Surface o Text — las paletas de marca ya llegan con roles sugeridos según la luminosidad.
Biblioteca de paletas listas para usar
20 paletas para cargar con un clic: 10 temas populares de editor (Dracula, Nord, Catppuccin...) y 10 paletas de marcas reales (Spotify, Netflix, Google...).
Las cinco reglas de armonía cromática
Cada regla mueve el matiz de una forma distinta en el círculo cromático
Cuándo vas a necesitar esta herramienta
Los escenarios más comunes entre quienes usan el generador
Design systems de UI
Genera 5 colores a partir del color primario de la marca y expórtalos directo como variables CSS.
Identidad de marca
Explora armonías análogas y complementarias a partir del color del logo antes de definir la paleta oficial.
Temas para modo oscuro
Usa la regla Monocromática con luminosidad baja para construir surface, background y los tonos muted.
Pipelines de design tokens
La exportación en JSON incluye hex/RGB/HSL con la etiqueta semántica de cada color, lista para Style Dictionary.
Mockup rápido de un sitio
La vista previa en vivo muestra navbar, hero, tarjetas de features y footer usando los roles asignados — antes de escribir una sola línea de código.
Referencia de paletas de marcas conocidas
Carga paletas como Spotify, Netflix o Vercel como punto de partida para comparar o inspirar tu propia identidad visual.
Errores comunes al generar una paleta
Confundir análoga con monocromática
La armonía análoga varía el matiz en pasos pequeños; la monocromática conserva el mismo matiz y solo cambia la luminosidad.
Usar Tetrádica sin una jerarquía clara
Es la armonía más rica, pero exige un color dominante — los otros tres deben quedar como soporte o el resultado se ve saturado.
Olvidar guardar antes de regenerar
El historial conserva solo las últimas 10 generaciones — copia el CSS o el JSON si necesitas guardar la paleta de forma permanente.
Sobrescribir un role sin revisar el contraste
El ícono de lápiz en cada tarjeta de role permite elegir cualquier color libremente, pero la detección automática de contraste solo aplica a los colores sugeridos — una sobrescritura manual puede romper la legibilidad sin aviso.
Pensar que la exportación sigue el orden de los swatches
El CSS y el JSON exportados usan los colores asignados en las tarjetas de role (primary, secondary...), no el orden de la tira de swatches. Si arrastraste colores a otros roles, la exportación refleja esa nueva asignación.
Usar una paleta de marca sin revisar la vista previa
Paletas listas como Dracula o Spotify fueron pensadas para su contexto original, no necesariamente para tu layout. Abre la Vista Previa antes de exportar para confirmar que el texto sigue siendo legible sobre el fondo.
Por qué usar este generador de paletas de colores
Aplica reglas geométricas del círculo cromático — adyacencia análoga, oposición complementaria, división triádica — para producir puntos de partida que funcionan sin necesitar intuición de diseñador.
Los sliders globales de saturación y luminosidad mueven toda una armonía de "UI vibrante de día" a "accesible en modo oscuro" sin romper la relación entre los colores.
Más allá de la generación matemática, el flujo está completo: asigna los 5 colores a los roles reales de un design system (primary, secondary, accent, background, surface, text) arrastrando y soltando, y mira el resultado aplicado a la vista previa de un sitio entero antes de exportar nada.
Preguntas frecuentes
Es el uso de relaciones matemáticamente definidas entre matices en el círculo cromático para crear paletas equilibradas. Las paletas armónicas son más fáciles de procesar visualmente y se ven profesionales sin necesitar ojo entrenado de diseñador.
Recursos y referencias
Cómo usar en un proyecto real las variables CSS que exporta esta herramienta.
Base teórica del círculo cromático y de las reglas geométricas de armonía de color.
Referencia oficial de Google sobre nombrar colores por rol (primary, secondary, surface) — la misma lógica que usa la asignación de roles de esta herramienta.
Herramientas relacionadas
- Paleta de Colores desde Imagen Diseño Extrae paletas de colores de cualquier imagen — obtén códigos HEX, RGB, HSL y exporta como CSS variables, Tailwind, JSON o PNG. 100% en el navegador, sin...
- Generador DESIGN.md Diseño Crea archivos DESIGN.md listos para IA para Google Stitch, Claude Code, Cursor y Copilot — define colores, tipografía, espaciado y componentes para...
- Selector de Color Diseño Selector de color gratuito — elige cualquier color visualmente y obtén al instante los códigos HEX, RGB, HSL, HSV y CMYK. Genera sombras, tintes, armonías y...
- Verificador de Contraste de Colores Diseño Verificador de contraste de colores gratuito — verifica conformidad WCAG 2.2 AA y AAA al instante. Vista previa en vivo, simulación de daltonismo y...
- Conversor de Colores Diseño Convierte colores entre HEX, RGB, HSL y CMYK al instante. Selector de color gratuito online con comprobador de contraste WCAG y generador de paletas.
