Color Palette Generator

Pick a seed color and a harmony rule to instantly generate a balanced palette. Lock the colors you love, regenerate the rest, and export to CSS variables, SCSS, or Tailwind config.

Share this tool

Generating palette...

Format:

analogous · 5 colors · seed #0F766E

#1D6F16

#12733B

#0F766E

#124A73

#161D6F

--color-1: #1D6F16;
--color-2: #12733B;
--color-3: #0F766E;
--color-4: #124A73;
--color-5: #161D6F;

What Is a Color Palette?

A color palette is a curated set of colors chosen to work harmoniously together. In design, consistent palettes establish brand identity, guide user attention, and create emotional tone. Without a deliberate palette, interfaces feel incoherent and unprofessional.

Every palette in this generator is derived from color theory — mathematical relationships between hues on the color wheel that the human visual system naturally perceives as balanced or interesting.

The Color Wheel and HSL

The HSL color model (Hue, Saturation, Lightness) maps perfectly onto the color wheel. Hue is the angle (0°–360°): red at 0°, green at 120°, blue at 240°. Saturation is how vivid the color is (0% = grey, 100% = fully saturated). Lightness controls brightness (0% = black, 100% = white).

All harmony modes in this tool work by rotating the hue angle while keeping saturation and lightness within comfortable ranges. This is why the seed color determines the feel of the entire palette — the other colors are derived from it.

Hue (H)

0° – 360°

The color itself — position on the wheel

Saturation (S)

0% – 100%

Vividness — grey to fully saturated

Lightness (L)

0% – 100%

Brightness — black through color to white

Harmony Types at a Glance

Choose based on the emotional character you want and how many distinct colors you need.

Mode	Natural count	Character	Best for
Analogous	5	Calm, natural, cohesive	Backgrounds, editorial layouts, landscapes
Complementary	2	Bold, high-contrast, energetic	Calls-to-action, sports brands, alert states
Triadic	3	Vibrant, balanced, playful	Infographics, children's products, playful UIs
Split-Complementary	3	Dynamic but softer than complementary	Balanced bold designs with visual interest
Tetradic	4	Rich, complex, versatile	Complex illustrations, game UIs, full brand systems
Monochromatic	5	Elegant, professional, focused	Luxury brands, minimalist apps, typography-heavy layouts

Harmony Modes Explained

Analogous

Colors sit 30°–60° apart on the wheel — neighbours that naturally belong together. The result is soothing and easy to look at, making analogous palettes ideal for interfaces where calm focus matters. Reduce saturation toward the edges to prevent the outer colors from competing with the focal color.

Complementary

Colors sit 180° apart — direct opposites on the wheel. The contrast is maximum, which creates energy and urgency. Use one color as the dominant tone (roughly 70% of the design) and the complement as a sharp accent. Pure complementary pairs at full saturation can vibrate visually — soften one side.

Triadic

Three colors spaced 120° apart form an equilateral triangle on the wheel. All three are bold and distinctive, so you must establish a clear hierarchy: one dominant, one secondary, one accent. Triadic schemes are popular in bold graphic design because each color holds its own.

Split-Complementary

Instead of the direct complement (180°), take the two colors flanking it (at 150° and 210°). This gives high contrast and visual interest while being softer and easier to work with than a pure complementary pair. A safe choice when you want drama without harshness.

Tetradic / Square

Four colors at 90° intervals form a square on the wheel. This gives the widest variety of any scheme, but balance is harder to achieve. Pick one dominant color and use the other three as supporting roles. Tetradic works best when saturation is kept consistent across all four.

Monochromatic

A single hue at varying lightness levels — from near-black through the full color to near-white. The result is highly polished and cohesive. Depth comes entirely from value contrast, not hue contrast. Text legibility is easy to maintain because you are only varying lightness, not hue.

The 60–30–10 Rule

Interior designers and UI designers both rely on the 60–30–10 distribution: 60% dominant color (usually a neutral or your main brand color), 30% secondary color (a supporting hue from your palette), and 10% accent color (the boldest, most saturated color used sparingly for key actions and highlights).

60%

Dominant

Backgrounds, large surfaces, whitespace fills. Usually your lightest or most neutral palette color.

30%

Secondary

Cards, sidebars, section headers. Provides contrast with the dominant but stays subordinate.

10%

Accent

Buttons, links, badges, icons. Your most distinctive color — used rarely so it retains impact.

Colour Accessibility (WCAG)

A beautiful palette that fails contrast requirements is unusable for a significant portion of your audience. WCAG 2.1 defines two levels: AA (contrast ratio ≥ 4.5:1 for body text, ≥ 3:1 for large text) and AAA (≥ 7:1 for body text).

This generator automatically selects white or dark text for each swatch based on its WCAG luminance value — the same calculation used by browsers for forced-colour modes. When building your UI, run your actual text-on-background pairs through a dedicated contrast checker.

Level	Body text	Large text (18pt+)	UI components
AA (minimum)	4.5 : 1	3.0 : 1	3.0 : 1
AAA (enhanced)	7.0 : 1	4.5 : 1	—

Frequently Asked Questions

What is the difference between a colour scheme and a colour palette?

A colour scheme is the conceptual rule — for example, 'complementary' or 'triadic'. A palette is the specific set of colors derived from applying that rule to a particular seed color. Two designers using the same scheme but different seed colors will produce very different palettes.

How many colors should a UI palette have?

A practical UI palette has 5–7 colors: 1–2 brand colors, 1 background, 1 surface, 1 border, 1 text-main, and 1 text-muted. The harmony generator gives you the brand color family; the neutrals (grey, white, near-black) are usually added separately. Aim for the minimum number of colors that lets you communicate hierarchy clearly.

Why do my complementary colors look harsh?

Full-saturation complementary pairs create simultaneous contrast — the colors appear to vibrate against each other. Solutions: desaturate one side (make it a muted, earthy tone), use a tint or shade of the complement instead of the full hue, or add significant lightness difference so the two colors never sit at equal saturation and value simultaneously.

Can I use the generated palettes commercially?

Yes — colors themselves are not copyrightable. This tool uses standard color harmony mathematics to derive your palette. You own the creative output. The only restriction is the tool itself, which is for use under the CalculatorsUniverse terms of service.

What does 'locking' a color do?

Locking pins a specific color to its position in the palette. When you click Generate again, locked positions keep their exact hex value while unlocked positions are regenerated using the harmony rule. Use this to preserve a perfect accent while exploring variations for the supporting colors.

Which export format should I use?

CSS custom properties (variables) work in any modern browser and framework. SCSS variables are best if your project uses Sass. Tailwind config is ideal if you are extending a Tailwind theme — paste the output into the 'colors' key of your tailwind.config.js 'extend' block.