Color Palette Generator

About this tool

This palette generator produces five-color schemes using eight color-harmony modes — from fully random through monochromatic, analogous, complementary, and triadic relationships built on the color wheel. Press space (or the Generate button) to reroll, click any swatch to copy its hex code, and export the whole palette as ready-to-paste CSS variables or JSON.

When to use it

• Starting a design or side project and needing a coherent color scheme faster than picking hues one at a time.
• Exploring alternatives around a look you like — harmony modes keep rerolls related instead of random.
• Handing colors to code: the CSS export gives you custom properties you can drop straight into a stylesheet.

How the harmony modes differ

Analogous palettes take neighboring hues (say, blue through teal to green) and read as calm and cohesive — good for backgrounds and dashboards. Complementary palettes pair opposite hues (blue and orange) for maximum contrast — good when you need an accent color that pops against a base. Monochromatic keeps one hue and varies lightness and saturation, which is the safest starting point for a UI: pick your brand hue, generate, and you have tints and shades that already work together.

Frequently asked questions

How do I keep a color I like and change the rest?

Generate until a swatch you like appears, copy its hex, then switch to a harmony mode built around similar hues — monochromatic or analogous rerolls will stay in that neighborhood. For exact lock-and-vary control, a monochromatic scheme seeded by rerolling is the closest fit.

What format are the exports?

Copy CSS gives you the five colors as CSS custom properties ready for a :root block; Copy JSON gives a plain array of hex strings for use in scripts or design tokens. Individual swatches copy as bare hex codes like #4F46E5.

Are these palettes accessible for text contrast?

Harmony modes control hue relationships, not contrast ratios. Before using a palette for text on background, check the pair against WCAG contrast requirements (4.5:1 for body text) — dark-on-light pairs from the same palette usually need a lightness adjustment.

Why five colors?

Five covers the common roles in a scheme: background, surface, primary, accent, and a neutral. It's enough to style a real interface and small enough that the palette stays coherent.