Palette Generator
Harmonies from one colour, each swatch carrying the contrast it can actually deliver.
What you provide
CSS custom properties
--color-base: #3c83f6; --color-harmony-1: #f6af3c;
Result
Complementary palette from #3C83F6
Opposite on the wheel — maximum separation, strongest contrast. The rotation is arithmetic on the colour wheel, but equal lightness on that wheel is not equal perceived lightness — pure yellow at 50% is far brighter than pure blue at 50%. That is why 0 of these 2 can carry body text on white despite all being generated at the same lightness.
Base
#3C83F6 · 3.6:1 on white
Harmony 1
#F6AF3C · 1.9:1 on white
- Hex
- #3C83F6
- RGB
- rgb(60, 131, 246)
- HSL
- hsl(217, 91%, 60%)
- Contrast on whiteWCAG AA needs 4.5:1 for body text, 3:1 for large text
- 3.64:1
- Contrast on black
- 5.77:1
- Usable as body text on white
- 0 of 2
What this cannot tell you
- Harmonies are rotations on the HSL colour wheel — arithmetic, not taste. They produce colours that relate to each other predictably, which is a starting point rather than a finished palette.
- HSL lightness is not perceived lightness. Colours generated at the same lightness value differ markedly in apparent brightness — yellow against blue is the obvious case — which is why every swatch shows its own contrast rather than the palette carrying one badge.
- Contrast figures use the WCAG 2 formula against pure white and pure black. For any other pairing, check the two colours directly in the contrast checker.
- Colours are handled in sRGB, so a wide-gamut display or a print process will not reproduce them exactly as shown.
Take this with you
How this processes your file
Pick a base colour and the tool rotates it around the HSL wheel by the angles that define each harmony: 180 degrees for a complement, 30 for analogous neighbours, 120 for a triad. That part is arithmetic every palette tool agrees on. What most of them leave out is what happens next — rotating hue at a fixed lightness produces swatches that are mathematically equal and visually nothing of the sort, because HSL lightness does not track how bright a colour looks. So each swatch is shown with its contrast against white and black, and the summary counts how many of them can actually carry body text. That count is usually lower than the palette looks.
What the results mean
- Complementary
- Opposite on the wheel. Maximum separation and the strongest contrast — effective for a single accent, exhausting for a whole interface.
- Analogous
- Neighbours 30 degrees apart. Cohesive and calm, and low-contrast by construction, so it needs a darker or lighter tone brought in for text.
- Triadic
- Three colours evenly spaced. Vivid and balanced on paper; in practice one has to dominate and the other two act as accents.
- Usable as body text on white
- How many swatches reach 4.5:1 against white. Rarely all of them, and that is normal — the rest are backgrounds, borders and accents.
Common problems and fixes
- The palette looks great but the text is unreadable
- That is the HSL lightness trap. Use the swatch contrast figures: take text colours from whatever passes 4.5:1 and let the vivid colours be backgrounds and accents.
- The colours feel unbalanced
- Equal saturation across hues is not equal intensity. Pull saturation down on the hues that shout — usually yellows and cyans — and leave the base alone.
- I need more than four or five colours
- Take a harmony for the hues and generate tints and shades of each in the colour picker. Interfaces need lightness variation far more than they need extra hues.
Frequently asked questions
What is a complementary colour scheme?
Two colours opposite each other on the wheel, 180 degrees apart. It is the highest-contrast pairing available, which makes it excellent for one accent against a dominant colour and hard to live with when both are used at equal weight. The usual fix is to let one dominate and use the other only where you want the eye to go.
How do I choose colours that work together?
Start from one colour you have to use — a brand colour, usually — and take a harmony from it for structure. Then check contrast before committing: a palette is only usable if something in it can carry text. Most working palettes are one or two hues with several lightness steps each, rather than four or five different hues at equal weight.
Are these palettes accessible?
Individual pairings are or are not; a palette as a whole is neither. Each swatch above shows its contrast against white and black so you can pick text colours deliberately. A vivid colour that fails as body text is still perfectly good as a background or a border.