Color Palette Generator
Generate harmonious color palettes from any base color.
Complementary palette
Base color details
Shades & tints
How to use
- Pick a base colour or hit Random to start fresh.
- Choose a harmony type: complementary, triadic, analogous, or tetradic.
- The palette appears instantly with all hex codes labelled.
- Drag swatches to reorder them or click to lock individual colours.
- Export the palette as image, CSS variables, or JSON.
Frequently asked questions
What harmony rules are available?
Complementary, split-complementary, analogous, triadic, tetradic, and monochromatic. Each one applies a different geometric relationship on the color wheel to produce a balanced set.
Can I lock colors and regenerate the others?
Yes. Click a swatch to lock it, then hit Generate again. Only the unlocked colors will change, which is great for refining a palette around an existing brand color.
How do I export for Tailwind or CSS variables?
The Export menu offers CSS custom properties, Tailwind config, Sass variables, and a JSON object ready to drop into any design token system.
Will the palette be accessible?
The generator shows the contrast ratio between every pair of swatches so you can spot accessibility issues immediately. For interface design, ensure text and background pairs meet at least WCAG AA.
Colour harmony rules, demystified
Classic harmonies are positions on the hue wheel. Complementary pairs sit 180 degrees apart (terracotta and teal), giving maximum tension; use one as the dominant and the other strictly as an accent. Analogous palettes take 3-4 neighbours within about 60 degrees (sage, olive, cream) and feel calm because nature is full of them. Triadic schemes space three hues 120 degrees apart and are the hardest to balance: mute two of the three or the page turns into a circus.
The 60-30-10 rule
Whatever harmony you pick, distribution matters more than selection. Roughly 60% of the surface should be a quiet base (backgrounds, cards), 30% a supporting colour (sections, navigation), and 10% the accent that carries buttons and highlights. Most "my palette looks wrong" problems are a 33-33-33 distribution of colours that would have worked fine at 60-30-10.
From generated palette to usable system
- Immediately test your text colour against every background colour in the palette. A pretty palette that cannot host readable text is a swatch, not a system.
- Derive functional colours (success green, error red, warning amber) by shifting your palette's saturation and lightness onto those hues, so alerts feel native rather than pasted in.
- Lock your neutrals first. Greys tinted slightly toward your dominant hue (a warm grey for a terracotta site) read as intentional; pure #808080 greys read as default.
- Export the palette as CSS custom properties from day one. Renaming hard-coded HEX values across a stylesheet later is the most avoidable refactor in front-end work.
Common palette mistakes, named
- The candy shop: five saturated hues at equal strength, no neutral base. Fix by demoting three of them to tints and adding warm greys.
- The vanishing accent: an accent too close in lightness to the base, so buttons disappear. Accents need lightness contrast, not just hue contrast.
- Untested text: a palette approved as swatches, never as text on background. Run every text-bearing pair through a contrast check before committing.
- Dark-mode by inversion: flipping lightness values wholesale produces glowing, oversaturated colours on dark surfaces; dark themes need desaturated variants chosen deliberately.
Advertisement