🎨 Color Palette Generator
Generate harmonious color palettes — complementary, triadic, analogous, and more. Export as CSS variables, HEX list, or JSON. Free online color palette generator for designers.
How to Use
1
Pick a base color
Click the base color swatch or enter a HEX value to set your starting color.
2
Choose a scheme
Select Complementary, Analogous, Triadic, Tetradic, or Monochromatic from the scheme selector.
3
Export the palette
Lock colors you want to keep, click Regenerate to vary others, then export as CSS variables, Tailwind, or JSON.
Frequently Asked Questions
What is a color palette in design?
A color palette is a set of colors chosen to work harmoniously together in a design. Color theory defines relationships between colors: complementary (opposite on the color wheel), analogous (adjacent), triadic (three equidistant), tetradic (four), and monochromatic (same hue, varying lightness).
What is a complementary color scheme?
Complementary colors are directly opposite each other on the color wheel (e.g., blue and orange, red and green). They create strong contrast and visual tension — ideal for call-to-action buttons and highlights that need to stand out.
What is an analogous color scheme?
Analogous colors are adjacent on the color wheel (e.g., blue, blue-green, green). They create harmonious, natural-looking combinations with low contrast — great for backgrounds, serene designs, and nature-inspired UIs.
How do I lock a color I like?
Click the lock icon on any color swatch to lock it. Locked colors are preserved when you click Regenerate or change the scheme type. This lets you keep a brand color while varying the supporting palette.
How do I export the palette?
Use the Export dropdown to copy as CSS custom properties (--color-1: #abc), Tailwind config colors object, or a raw JSON array. All formats are ready to paste directly into your project.
Guía: Generador de Paletas de Color
¿Qué es?
Genera conjuntos de colores armoniosos según teoría del color: complementarios, análogos, triádicos o monocromáticos. Una paleta bien elegida establece identidad visual y guía la atención del usuario.
Cómo usar
- Elige un color base con el selector o valor HEX.
- Selecciona el esquema: complementario, análogo, triádico, monocromático.
- Exporta como CSS variables o JSON.
Consejos
- Limita tu paleta principal a 3-5 colores: primario, secundario, acento y neutros.
- Verifica el contraste para accesibilidad (WCAG AA mínimo).
- Las variables CSS como
--color-primary-500facilitan los temas claro/oscuro.