Design

Color Palette Generator

Generate colour palettes from a base colour using harmony rules, with accessibility contrast checks built in. Runs in your browser.

Export

/* CSS Variable Export */

Need this done properly for your business?

Radiatus delivers secure cloud, DevOps & compliance engineering.

Book a free consult

Harmony rules are starting points

Complementary pairs sit opposite on the colour wheel and produce maximum contrast, which is useful for a call to action against a dominant brand colour and exhausting if used in equal amounts. Analogous schemes take neighbours and feel calm but can lack a focal point. Triadic schemes are vivid and hard to balance. Split-complementary keeps most of the contrast of a complementary pair with less tension. These are heuristics from pigment theory, not rules, and every one of them can be broken deliberately.

The 60-30-10 proportion does more work than the hues

Most palettes fail on proportion rather than hue selection. Roughly 60 percent of a surface should be a dominant neutral, 30 percent a secondary colour, and 10 percent an accent. Applied at equal weight, even a technically harmonious triad looks chaotic. Choosing which colour is dominant matters more than which three you picked.

You need more neutrals than you think

A working interface palette is mostly greys. Typically you want a background, a raised surface, a border, a muted text colour and a primary text colour before any brand colour appears. Pure grey often looks dead next to a saturated brand colour; tinting neutrals very slightly toward the brand hue makes the whole interface feel deliberate.

Check contrast while generating, not afterwards

Retrofitting accessibility to a finished palette usually means changing the colours, which means redoing the palette. WCAG requires 4.5:1 for normal text, 3:1 for large text and for interface components and focus indicators. Generating in a perceptually uniform space such as OKLCH helps, because equal lightness values genuinely look equally bright, so a palette built on a consistent lightness ramp behaves predictably.

Do not encode meaning in hue alone

Around one in twelve men has some form of colour vision deficiency, most commonly red-green. A status system distinguished only by red and green is unreadable for them. Pair colour with an icon, a label or a shape. Testing a palette in greyscale is a fast way to find places where colour is carrying information alone.

Frequently Asked Questions

Privacy & Security

Generated locally.

Data: None
Client-side-Side
Active
v1.0

About This Tool

This tool runs entirely in your browser. No data is sent to any server, ensuring complete privacy. Simply use the interface above to get started — no registration or login required.

Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.