What is colour harmony?

Colour harmony describes the geometric relationships between hues on the colour wheel. Complementary colours sit opposite each other, analogous colours sit beside each other, triadic colours form a triangle, and so on. Each harmony produces a different mood and balance.

Which harmony should I pick for branding?

Analogous and monochromatic palettes feel calm, premium and on-brand because they stay close to a single hue. Complementary and triadic palettes feel energetic and are great for illustrations, marketing campaigns and dashboards that need clear visual separation.

How do I use the palette in code?

Click export → CSS to download a stylesheet with --palette-1 through --palette-N custom properties you can drop straight into your :root. Export → JSON gives you a structured payload to feed into design tokens or Tailwind config.

Is the palette accessible?

The tool generates pleasing combinations but does not enforce WCAG contrast ratios. Use the live UI preview as a sanity check and run any text/background pair through a contrast checker before shipping it.

Can I save my palette?

Export it as JSON or CSS to keep a permanent copy. You can also bookmark the page — the base colour, harmony and count are all derived deterministically from your inputs.

Why are tetradic palettes only four colours?

A tetradic harmony is defined by four hues spaced 90° apart on the wheel. Adding more would break the geometric relationship that gives the palette its character.

Yes. Unlimited palettes, no signup, no watermark.

Are colour values stored anywhere?

No. Everything happens in your browser. Nothing is sent to a server.

Colour Palette Generator — Harmonies, Exports & Live Preview

A great palette is the difference between a design that feels intentional and one that feels accidental. Building one from scratch by eye is slow, and copying palettes from inspiration sites locks you into someone else's brand. PikDraw's colour palette generator takes a single base colour and derives mathematically harmonious sets — complementary, analogous, triadic, tetradic, split-complementary, monochromatic and shade ladders — that you can copy, preview and export to CSS variables, JSON or SVG in seconds.

What is the Colour Palette Generator — Harmonies & Exports?

The generator turns a hex colour into a full palette using classical colour-wheel harmonies. You pick the base, choose a harmony, and (where applicable) adjust the swatch count. Each swatch is clickable to copy its hex value, and the whole palette can be exported as a CSS variables block, a JSON token file, or a labelled SVG colour strip. A live UI preview shows the palette applied to typography, surfaces and badge chips so you can judge the result in context.

Key features

Seven harmonies: complementary, analogous, triadic, tetradic, split-complementary, monochromatic and shades
Adjustable swatch count for analogous, monochromatic and shade palettes
Click any swatch to copy its hex value to clipboard
Live UI preview applies the palette to a sample surface
Export as CSS custom properties, JSON tokens or SVG colour strip
Random base colour generator for quick inspiration
Smart foreground colour calculation for readable swatch labels
Runs entirely in the browser — no signup, no tracking

How it works

Each base colour is converted from HEX → RGB → HSL so that hue, saturation and lightness can be manipulated independently. The chosen harmony is implemented as a deterministic hue rotation: complementary adds 180°, triadic spaces three swatches by 120°, tetradic by 90°, split-complementary lands at 150°/210°, and analogous spreads symmetrically around the base in 30° steps. Monochromatic and shade modes hold the hue constant and walk lightness (and slightly saturation) up and down. For each generated swatch, the result is converted HSL → RGB → HEX and rendered as a tile. PikDraw calculates the swatch's perceived lightness to decide whether labels render in black or white, which keeps every swatch readable regardless of the base colour you started from.

Why use this tool

PikDraw goes further than a static swatch grid: the live UI preview means you can immediately see how the palette feels on real surfaces, not just as isolated colour chips. The export formats remove the bridge between exploration and implementation — CSS variables drop straight into a stylesheet, JSON feeds design-token pipelines, and SVG is perfect for mood boards and pitch decks. Because everything runs locally, brand work and unreleased product palettes stay private.

Common use cases

Generating brand-safe secondary and accent colours from a primary hue
Building marketing campaign palettes around a hero illustration colour
Producing data-visualisation palettes where categories must look distinct
Drafting UI theme tokens before committing them to a design system
Inspiring social media graphics, posters and merchandise
Teaching colour theory using a live, interactive wheel

How to use this tool

Pick a Base Colour — Use the colour picker or paste a hex value to set the starting colour. The whole palette is derived from this single seed.
Choose a Harmony — Select complementary, analogous, triadic, tetradic, split-complementary, monochromatic or shades to control how the other swatches relate to the base.
Adjust the Swatch Count — For analogous, monochromatic and shade palettes, slide the count up to 9 to widen the range or down to 3 for a tighter set.
Copy or Export — Click any swatch to copy its hex value. Export the whole palette as CSS variables, JSON or an SVG colour strip.

Who should use this

Designers exploring secondary palettes for a new brand. Developers who need code-ready theme tokens without booting a design tool. Marketers building campaign-specific colour systems. Educators teaching the geometry of colour harmonies. Anyone who wants to skip the chore of mixing colours by hand and go straight to an export.

How to get started

Set a base colour, choose the harmony that matches your mood (analogous for calm, triadic for energy, monochromatic for premium), tweak the swatch count, and export. Bookmark or share the page to revisit the same setup later.

Best practices

Always verify text/background pairs against WCAG before shipping — harmony does not guarantee contrast.
Use monochromatic ladders to derive surface, border and hover tokens from a single brand colour.
When designing data visualisations, prefer triadic or tetradic palettes so categories stay visually separable.
Export to CSS variables and namespace them (e.g. --brand-primary-500) before adding to your design system.
Save a JSON copy alongside design files so palettes survive tool migrations.

Pro tips

Start from a brand colour and use analogous mode to find supporting tones that stay on-brand.
Triadic and tetradic palettes are great for illustrations and data visualisations that need distinct, balanced colours.
Use the live UI preview to sanity-check contrast before committing to a palette.
Export to CSS variables for the fastest path from palette to working theme tokens.

Expert insights

💡 Start From Brand

Paste your primary brand hex as the base, then explore analogous mode for safe supporting tones.

⚡ Export Then Theme

CSS export gives you ready-to-use custom properties — drop them into :root and you have an instant theme.

✓ Always Check Contrast

Harmony is about feel, not accessibility. Run text/background pairs through a WCAG contrast checker.

🔍 HSL Under the Hood

Every harmony is a deterministic hue rotation in HSL space, which is why results are stable and reproducible.

⭐ Private Exploration

Confidential rebrands stay confidential — no colours, hex codes or palettes are ever sent off-device.

Limitations to be aware of

Generated harmonies are based on RGB/HSL geometry rather than perceptually uniform spaces like OKLCH.
The tool does not auto-enforce accessibility contrast ratios.
Palettes are derived from a single base colour — multi-hue brand systems may need manual blending.
Print colour conversion (CMYK) is not supported; output is RGB only.

Frequently asked questions

What is colour harmony?: Colour harmony describes the geometric relationships between hues on the colour wheel. Complementary colours sit opposite each other, analogous colours sit beside each other, triadic colours form a triangle, and so on. Each harmony produces a different mood and balance.
Which harmony should I pick for branding?: Analogous and monochromatic palettes feel calm, premium and on-brand because they stay close to a single hue. Complementary and triadic palettes feel energetic and are great for illustrations, marketing campaigns and dashboards that need clear visual separation.
How do I use the palette in code?: Click export → CSS to download a stylesheet with --palette-1 through --palette-N custom properties you can drop straight into your :root. Export → JSON gives you a structured payload to feed into design tokens or Tailwind config.
Is the palette accessible?: The tool generates pleasing combinations but does not enforce WCAG contrast ratios. Use the live UI preview as a sanity check and run any text/background pair through a contrast checker before shipping it.
Can I save my palette?: Export it as JSON or CSS to keep a permanent copy. You can also bookmark the page — the base colour, harmony and count are all derived deterministically from your inputs.
Why are tetradic palettes only four colours?: A tetradic harmony is defined by four hues spaced 90° apart on the wheel. Adding more would break the geometric relationship that gives the palette its character.
Is this tool free?: Yes. Unlimited palettes, no signup, no watermark.
Are colour values stored anywhere?: No. Everything happens in your browser. Nothing is sent to a server.

Browse all PikDraw image tools →