Color Palette Generator
Generate complementary, analogous, triadic, and monochromatic palettes from any colour.
Click any swatch to copy its hex code.
Start from any base colour and generate a complementary, analogous, triadic, or monochromatic palette built on established colour theory — the same relationships designers use to pick colours that work well together rather than clashing.
Each palette shows hex codes ready to copy directly into CSS, design tools, or a brand style guide.
The harmony types
| Scheme | How it's built | Feels |
|---|---|---|
| Complementary | Two hues opposite on the wheel | High contrast, energetic |
| Analogous | Three neighbouring hues | Calm, cohesive |
| Triadic | Three hues evenly spaced | Vibrant but balanced |
| Split-complementary | A hue plus the two either side of its opposite | Contrast with less tension |
| Tetradic | Two complementary pairs | Rich, hardest to balance |
| Monochromatic | One hue at varied lightness | Minimal, unmistakably unified |
The 60-30-10 rule
A palette is a set of relationships, not a set of equal parts. The convention that keeps interfaces from feeling chaotic is 60-30-10: roughly 60% of the visible area in a dominant neutral, 30% in a secondary colour, and 10% in an accent reserved for the things that matter — the primary button, the active state, the alert.
Most palettes fail in application rather than in theory. Six beautiful colours used in equal measure produce a page with no hierarchy, because when everything is emphasised nothing is.
Making a palette usable in a real interface
- Check text contrast before committing. A colour that looks superb as a swatch may fail WCAG AA against white — 4.5:1 is the threshold for body text.
- Generate tints and shades of each hue. A palette needs 5–9 steps per colour to cover backgrounds, borders, text and hover states.
- Reserve a colour for destructive actions, conventionally red, and don't use it decoratively anywhere else.
- Never encode meaning in hue alone. Around 8% of men have some form of colour vision deficiency, so pair colour with an icon, label or pattern.
- Test the palette in dark mode. A colour that reads well on white often glows unpleasantly on near-black and needs desaturating.
- Keep one true neutral. A palette of nothing but saturated colours has nowhere for the eye to rest.
Frequently asked questions
- What's the difference between complementary and analogous palettes?
- Complementary colours sit opposite each other on the colour wheel for high contrast; analogous colours sit next to each other for a more harmonious, low-contrast look.
- What is a monochromatic palette good for?
- Monochromatic palettes vary only the lightness and saturation of a single hue, producing a cohesive, subtle look often used for minimalist or professional designs.
- Can I copy the exact hex codes for use in CSS?
- Yes — every colour in the generated palette shows its hex code, which you can copy directly into your stylesheet or design tool.
- How many colours should a brand palette have?
- Usually one primary, one or two secondaries, an accent, and a neutral range — plus semantic colours for success, warning and error. More than that becomes hard to apply consistently.
- Will these colours pass accessibility checks?
- Not automatically. Colour harmony and contrast are different problems — check each text-and-background pair against the WCAG thresholds with the colour converter before shipping.
- Why does my palette look wrong in dark mode?
- Saturated colours that sit comfortably on white tend to vibrate against near-black. Dark themes generally need slightly desaturated, slightly lighter variants rather than the same hex values inverted.