Harmonious Palette Creator
Drop in a base colour (or two) and get a clean, grouped palette you can actually use — with harmony rules, favourites, and one-click copy for hex, CSS and JSON.
Grouping: top row = base + harmony accents. Bottom row = matching tints for each.
On keeps Base A/B untouched. Off allows subtle nudges for a more “designer” feel.
High contrast pushes the light/dark range further apart.
Dragging the slider updates smoothly (generation is debounced).
Click any swatch to copy its hex code.
Instructions
What this tool does
Generate a 5–7 colour palette from one or two base colours using classic colour harmony rules (Complementary, Analogous, Triadic, etc.). Palettes are shown in two tidy rows, grouped as “core colours + matching tints”, so it’s easy to pick pairs that belong together.
1) Enter your base colour(s)
Base A: pick a colour or type a hex code (e.g.
#0B65AF).Optional: tick Use two base colours to enable Base B (great for brand pairings).
Tip: If you paste a hex code, use full 6-digit hex (#RRGGBB).
2) Choose a harmony rule
Pick the style you want:
Monochrome – one hue family
Analogous – neighbouring hues
Complementary – opposite hues (high contrast)
Split complement – softer complementary
Triadic / Tetradic / Square – bold multi-hue palettes
3) Decide how “strict” it should be
Keep bases exactly (On/Off)
On: keeps Base A (and Base B) unchanged.
Off: allows small adjustments for a more “designer” feel.
Contrast preference (Soft/High)
Soft: closer, calmer palettes
High: more punchy separation between colours
4) Pick the number of swatches
Use the slider for 5–7 swatches.
The palette layout adapts automatically into two rows with tidy grouping.
5) Copy colours instantly
Click any swatch to copy the hex code.
The hex label is shown on each swatch for quick scanning.
6) Export for dev work
Copy CSS variables to paste into your site / theme
Copy JSON if you want a portable palette format
7) Save favourites
Click Add to favourites to store the current palette setup (bases, rule, options, and the generated swatches).
Recent favourites appear as clickable chips.
View all opens the full list where you can load or remove saved favourites.
Note: favourites are saved in your browser only (they won’t sync between devices).