Colour Palette Generator Online Free Tool
Colour Palette Generator | 6 harmony palettes - complementary, triadic, tetradic, analogous, monochromatic, split-complementary - from any base colour. Free, client-side.
Pick a base colour and instantly get a harmony palette — six schemes, role-labelled swatches, contrast-correct text, ready to copy or export.
How to Use Colour Palette Generator Online Free Tool
- Pick a base colour with the colour picker, or type a hex code directly (the 3-digit shorthand
#f00is accepted too). Picker and text input stay in sync. - Choose a harmony scheme from the dropdown. Each has its swatch count printed next to it, so there are no surprises about palette size.
- Read the role labels on each swatch - "Base", "Complement", "Split 1/2", "Triad 1/2", "Square 1/2/3", "Accent ±30°/±60°", or "Shade/Tint" - so you know which hue belongs where in a design.
- Notice the text colour flips on each swatch - dark text on pale swatches, white text on dark ones, picked by luminance so the labels are always readable.
- Click a swatch (or focus it and press Enter/Space) to copy its hex. The toast confirms the copy.
- Copy all or download as JSON (full data), CSS custom properties (with role-based names), or SVG swatch strip for Figma/Illustrator.
- Press
Ctrl+Enter(⌘+Enteron Mac) to force a re-run, or the Reset button to go back to the default indigo + analogous.
Frequently asked questions
Is my colour data secure?
Yes. Generation is a handful of HSL hue rotations in your browser. Nothing is uploaded, cached, or tracked.
Is this palette generator free?
Yes, 100% free. No sign-up, no watermark, no rate limit.
Does this work offline?
After the page loads, yes. HTML, CSS, and JS are self-contained – disconnect Wi-Fi and keep working.
How many swatches does each scheme generate?
Exactly: Complementary = 2, Split-complementary = 3, Triadic = 3, Tetradic / Square = 4, Analogous = 5, Monochromatic = 5. The dropdown prints the count next to each name so you know what to expect.
What’s the difference between the harmony schemes?
Complementary = base + hue+180° (maximum contrast). Split-complementary = base + ±30° around its complement (strong contrast with less tension). Triadic = three hues 120° apart (vibrant balance). Tetradic = four hues at 90° intervals (rectangular on the wheel). Analogous = base ± 30°/60° (harmonious). Monochromatic = same hue at five lightness levels (shade → mid → tint).
Which scheme should I use?
Analogous for calm interfaces, complementary for bold call-to-action moments, triadic and tetradic for playful brand systems, split-complementary when complementary feels too harsh, monochromatic for minimalist or editorial designs.
Why do the swatches have different text colours?
Each swatch’s label uses a contrast-correct text colour – dark (#0f172a) on pale backgrounds and white on dark ones – picked from the W3C relative-luminance formula. That way every role label and hex value stays legible no matter the hue.
Can I use these colours commercially?
Yes. Individual colours aren’t copyrightable (barring very narrow trademark cases). Use the output in any project, commercial or personal, without attribution.
Are these palettes based on colour theory?
Yes – the tool rotates hue in HSL by the classical intervals the six schemes define on the colour wheel (60°, 90°, 120°, 150°, 180°, 210°, 270°). Saturation and lightness stay constant so the palette hangs together tonally.
Can I export the palette?
Three formats. JSON keeps the full data structure (scheme, base, role, hex, hsl). CSS emits :root custom properties named after the swatch roles (--base, --complement, --accent-30, etc.). SVG produces a horizontal swatch strip – drop it into Figma or Illustrator and each rect becomes editable.