Color Palette Generator
Generate five-colour palettes from any base colour and a harmony rule — complementary, analogous, triadic and more — with exact hue math, one-click copying, and export as CSS variables or JSON. Press Space for a fresh palette.
Picking a harmony by the job
| You are making | Reach for | Why |
|---|---|---|
| a calm content site | analogous or mono | neighbouring hues do not compete with the content |
| a dashboard with alerts | complementary | the opposite hue makes states unmissable |
| a brand that must feel lively | triadic or tetradic | even spacing reads as deliberate variety |
| a safer take on contrast | split-complementary | near-opposites give tension without vibration |
Whatever the harmony, the ratio matters more than the hues: the classic rule of thumb is 60% dominant colour, 30% secondary, 10% accent. A palette used evenly in fifths reads as noise; the same five colours in 60/30/10 proportions read as design.
Everything runs locally; nothing you generate leaves your browser.
Frequently asked questions
What do the harmony names mean?
They are positions on the colour wheel relative to your base. Complementary sits directly opposite (180°) — maximum contrast, good for accents. Analogous takes the neighbours within 30° — calm, natural schemes. Triadic spaces three hues evenly (120° apart), tetradic four (90°); both give lively schemes that still feel deliberate. Split-complementary softens the complementary pair by using the two colours beside the opposite (150° and 210°). Monochrome keeps one hue and walks lightness — the safest scheme there is.
Why five swatches, and where do the extra ones come from?
Five is the working size of a real interface palette: a dominant, a secondary, an accent and two supporting tones. When a harmony defines fewer hues than five — complementary has two, triadic three — the remaining slots revisit the same hues at stepped lightness, so a two-hue palette gains light and dark variants instead of duplicates. The hue math itself is exact to the degree, which is what makes a palette reproducible.
How do I use the palette in my project?
Click any swatch to copy its hex, or use the export box: CSS variables paste straight into a stylesheet as --color-1 through --color-5, JSON imports into design tools and scripts, and the hex list drops into anything else. A common mapping: --color-1 for surfaces, the mid tones for text and borders, the most saturated swatch as the accent.
Does a harmonious palette guarantee readable text?
No — harmony is about hue relationships, readability is about luminance contrast, and the two are independent. Two beautifully harmonious colours can be illegible on top of each other. Before shipping text on a coloured background, check the pair in this site's colour converter, which computes the exact WCAG contrast ratio with pass/fail verdicts.
What does the random button actually randomise?
The base colour's hue across the full wheel, its saturation and lightness inside a band where every harmony still reads as a palette (55–85% saturation, 42–60% lightness), and the harmony rule itself. The bounds are why random results look presentable rather than washed out or neon — and once you see a base you like, switching harmonies explores it deterministically.
Is anything sent to a server?
No. The palette math runs entirely in your browser — the same hue arithmetic your CSS will do — and nothing you pick or generate leaves the page.
Related tools
- Diagram & Flowchart MakerDraw flowcharts and diagrams, connect the boxes with arrows that route themselves, and let it arrange the whole thing. Exports SVG. Nothing is uploaded.
- Password GeneratorGenerate strong random passwords using your browser's cryptographic RNG, with a live strength estimate.
- HTML Entity EncoderEncode text for HTML or decode entities back — the five markup breakers, named Latin-1 and symbol sets, numeric references up to emoji. Decodes exactly once.