Color harmony
Adjacent hues — harmonious, serene
Click any hex or HSL value to copy. Click the lock icon to preserve a swatch during regeneration.
How to use the color palette generator
- 1
Choose a color harmony mode
Analogous is a safe starting point for most brands. Complementary gives high contrast for bold, energetic brands. Monochromatic is elegant and minimal.
- 2
Adjust saturation and lightness
Saturation controls vibrancy (high = vivid, low = muted). Lightness controls how light or dark the palette feels. Most brand palettes sit at 60–70% saturation and 40–55% lightness.
- 3
Set a custom base colour (optional)
Enter a specific hex code or use the colour picker to anchor the palette to your existing brand colour. Click Apply to recalculate the harmony.
- 4
Lock favourites and regenerate
Hover over a swatch and click the lock icon to keep it. Hit 'Generate new palette' to randomise the unlocked swatches while preserving your locked colours.
- 5
Copy and use
Click any hex or HSL value to copy it individually. Use 'Copy all hex' for a comma-separated list, or 'Copy CSS vars' for a :root {} block ready to paste into your stylesheet.
Color harmony quick reference
Two colours opposite on the wheel. Maximum contrast. Use one as dominant, one as accent — never in equal amounts or the palette feels jarring.
Three to five adjacent colours. Feels natural and cohesive. Common in nature-inspired, wellness, and lifestyle brands.
Three evenly spaced hues. Vibrant and energetic. Let one colour dominate and use the other two as accents.
One hue in multiple shades. Clean, minimal, and sophisticated. Easiest to build a consistent visual identity with.
A base colour + the two colours adjacent to its complement. Lower tension than pure complementary — more versatile for UI design.
Ready to put your palette to work?
ZonedWeb's AI builds a real WordPress site from 1,300+ templates in ~60 seconds. Tell Zoni your brand colours and it applies them across your site automatically. Free to start, $29/mo for your own domain.
Frequently asked questions
What is a color harmony and how does the generator use it?
Color harmony is a set of rules from color theory that define which hues look pleasing together on the color wheel. The generator calculates harmonious hue relationships (complementary = opposite hues, analogous = adjacent hues, triadic = evenly spaced thirds, etc.) and combines them with your chosen saturation and lightness to produce a balanced palette. The algorithm uses HSL (hue, saturation, lightness) color space because it maps naturally to human perception of color.
What is the difference between complementary and analogous color palettes?
Complementary palettes pair hues directly opposite on the color wheel (e.g. blue and orange). They create strong visual contrast — great for CTAs and attention-grabbing design. Analogous palettes use hues adjacent to each other (e.g. blue, blue-green, green). They feel harmonious and calm — ideal for backgrounds and brand palettes that need to be lived with daily.
How do I use the palette on my website?
Click 'Copy CSS vars' to get a :root {} block with --color-1 through --color-5 variables ready to paste into your stylesheet. Or copy individual hex codes to use in your design tool (Figma, Canva, etc.) or directly in CSS. If your site is on ZonedWeb, paste the hex values and tell Zoni which colours to apply — the AI makes the changes live.
What does the lock icon do?
Locking a swatch (click the lock icon on hover) keeps that specific colour fixed when you hit 'Generate new palette'. This lets you start from a colour you like and regenerate the rest of the palette around it. Useful when you have a brand colour that must stay but want to explore complementary options.
How do I choose the right saturation and lightness for my brand?
High saturation (70–90%) is vivid and energetic — good for bold brands, CTAs, and accents. Lower saturation (20–50%) is muted and sophisticated — better for backgrounds and supporting colours. Lightness around 45–60% gives mid-tone colours that work on both light and dark backgrounds. For a professional palette, use high saturation for one or two accent colours and low saturation for the rest.