Color Palette Generator

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.

Related tools

• Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
• Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
• Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
• Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.