Color Palette Generator — Build 5-Color Brand Palettes Visually
Generate harmonious 5-colour palettes by harmony rule (analogous, complementary, triadic). Export hex, CSS, Tailwind, ASE.
About Color Palette Generator
A colour palette generator builds a small set of harmonious colours from a single base hue using formal colour-theory relationships — analogous, complementary, split-complementary, triadic, tetradic, monochromatic — so designers can scaffold a brand or UI palette in seconds rather than guessing. The ZTools Colour Palette Generator lets you pick any starting colour (hex, RGB, HSL, or pulled from an image), choose a harmony rule, fine-tune saturation and lightness across the resulting swatches, and export the palette as JSON, CSS variables, Tailwind config, Adobe ASE, or an SVG swatch sheet for handoff.
Use cases
- Brand kickoff. You have a brand primary blue. Generate a 5-swatch analogous palette to anchor the rest of the brand system in 60 seconds.
- UI design tokens. Build a 5–7 colour token set (primary, secondary, accent, neutral light, neutral dark) ready for the design system.
- Marketing assets. Posters and social-media graphics stay coherent when every asset pulls from the same five-colour set. Generate once, reuse forever.
- Data visualisation. Categorical chart palettes need distinct, balanced hues. Triadic or tetradic harmony provides perceptually distinct categorical colours.
How it works
- Pick a base colour. Type a hex, drag the colour wheel, or pull a colour from an image upload via the Image Color Extractor integration.
- Choose a harmony rule. Analogous (calm), complementary (high-contrast), split-complementary, triadic (balanced), tetradic (rich), monochromatic (subtle).
- Adjust saturation and lightness. Per-swatch sliders to soften or boost. The base hue stays anchored; surrounding swatches shift around it.
- Reorder and pin swatches. Drag to reorder; pin a swatch to lock it while regenerating others.
- Export. JSON, CSS custom properties, Tailwind 3/4 colour fragment, Adobe ASE for Illustrator/Photoshop, or SVG swatch sheet.
Examples
Input: Base #6B5BFF, analogous
Output: #3B5BFF, #5B5BFF, #6B5BFF, #855BFF, #A55BFF
Input: Base #FF6B5B, complementary
Output: #FF6B5B and #5BFFEF — high-contrast pair
Input: Base #00C2FF, triadic
Output: #00C2FF, #C2FF00, #FF00C2 — three perceptually distinct hues
Frequently asked questions
Which harmony rule should I pick?
Brand-friendly: analogous (calm) or complementary (vibrant). Categorical chart colours: triadic or tetradic. Subtle UI: monochromatic.
Are the swatches WCAG-accessible?
The generator includes contrast ratios for every pair; check before pairing as text/background. Add neutral light + dark to the palette so any swatch has a readable companion.
Can I match a competitor's palette?
Run their hero photo through the Image Color Extractor → take the dominant colour → use it as your base here. Result is "in the same family" without copying.
Does it produce light + dark variants?
Yes — toggle "shades and tints" to add lighter and darker steps for each colour, useful for hover states and disabled buttons.
How many colours fit in a UI palette?
5–7 is the sweet spot. Beyond that, cognitive load on designers and devs starts to hurt consistency.
Can I export as Tailwind 4 theme JSON?
Yes — the export emits a `theme.colors` snippet ready to paste into your Tailwind config or @theme block.
Pro tips
- Pin the base hue and regenerate — the harmony shifts around it, letting you explore variants quickly.
- For UI, always add neutral grey/white/black even when the harmony focuses on colour — pure colour palettes look amateur on real interfaces.
- Validate every text/background pair against WCAG AA (4.5:1) before shipping.
- Save the JSON in your repo as the source of truth; regenerate Tailwind config from it on demand.
- For data viz, prefer triadic — three distinct hues that map cleanly to three categories.
Reviewed by Ahsan Mahmood · Last updated 2026-05-05 · Part of ZTools.
For the full,
formatted version of this page, please enable JavaScript and reload
https://ztools.zaions.com/color-palette.