Colour Palette Generator
Build a harmonised palette from one base colour.
Harmony rules are a starting point, not an answer
Analogous, complementary, and triadic schemes are geometric relationships on the hue wheel. They reliably produce sets that look deliberate rather than accidental, which is genuinely useful when you are starting from nothing. What they cannot do is tell you which colour should be the button, which should be the background, and which should never appear next to body text — and those decisions are what actually make an interface work.
A generated set is raw material. The design work begins when you assign each colour a role and then test whether the assignment survives contact with real content.
The hue wheel does not match human perception
HSL and HSV are convenient because they are cheap to compute, but they are not perceptually uniform. Rotating hue by a fixed amount produces very different perceived jumps in different parts of the wheel — the greens sprawl across a wide range while the blues compress — and holding lightness constant while changing hue produces colours that clearly do not look equally light. Pure yellow at 50% HSL lightness reads far brighter than pure blue at the same value.
This is why palettes generated from evenly spaced hues often need manual correction. Perceptual spaces such as OKLCH and LCH solve the problem properly, and are worth reaching for when you are building a systematic tonal ramp rather than exploring.
Name colours by role, not by appearance
A token called --brand-blue becomes a lie the day the brand colour changes to green. Tokens named for what they do — --color-surface, --color-text-muted, --color-danger — survive rebrands, theme switches, and dark mode, because the role stays constant while the value changes. This single naming decision is the difference between a palette that scales into a design system and a list of hex codes that has to be found and replaced.
Plan for at least two backgrounds, two or three text weights, a border, and a small set of semantic accents. Most interfaces need fewer colours and more shades than a first palette provides.
How to use it
- Pick a base colour and a harmony scheme to generate a starting set.
- Assign each output a role — surface, text, border, accent — before using any of them.
- Run every text-and-background pair through a contrast check.
- Adjust lightness by hand where the generated values look perceptually uneven.
Questions worth asking
Which harmony scheme should I choose?
Analogous schemes read as calm and cohesive; complementary schemes give you a strong accent against a dominant colour; triadic schemes are vivid and harder to balance. For interfaces, one dominant hue plus a single complementary accent is the most reliable starting point.
Why do generated colours look uneven in lightness?
HSL is not perceptually uniform — the same numeric lightness looks much brighter in yellow than in blue. Perceptual colour spaces such as OKLCH avoid this, or you can correct the lightness values by eye.
How many colours does an interface need?
Usually fewer hues and more shades than people expect. Two backgrounds, two or three text weights, a border colour, one accent, and a small semantic set covers most products.
Do generated palettes pass accessibility checks?
Not automatically. Harmony rules operate on hue and ignore contrast entirely, so every foreground-and-background pair still has to be verified against WCAG ratios before use.
Disclaimer: Generated colours, scales, and CSS are a starting point for your own design system. Always verify contrast, rendering, and behaviour on real devices — passing an automated check is not the same as meeting your accessibility obligations.