Colour Palette Generator
DesignGenerate a harmonious colour palette from any base colour — complementary, triadic, analogous, or monochromatic. Instant, free, runs entirely in your browser.
What is a Palette?
A Colour Palette Generator derives a small set of colours that work well together, starting from a single base colour you choose. Rather than guessing which shades pair nicely by eye, the Colour Palette Generator applies one of four established colour theory rules — complementary, triadic, analogous, or monochromatic — to mathematically derive five related colours from your starting point.
This matters because picking colours that look good together is genuinely hard without training in colour theory. A palette built on a real relationship between hues — rather than colours chosen at random — reads as intentional and cohesive, whether you're designing a website, a presentation, or a piece of artwork. If you also need a strong, random value for something security-related rather than visual, the Password Generator covers that different kind of generation task.
How to use this Palette calculator
- Pick a starting colour using the Base Colour colour picker, or type a hex code directly into the text field next to it.
- Choose a Harmony rule — Complementary, Triadic, Analogous, or Monochromatic — from the dropdown.
- Review the five generated swatches, which update instantly as you change either setting.
- Click any swatch to copy its hex code to your clipboard — the swatch shows "Copied!" to confirm.
- Paste the copied hex codes into your design tool, CSS file, or document wherever you need them.
Formula & Methodology
The generator first converts your base colour from hex into HSL (Hue, Saturation, Lightness), since hue rotation — the basis of every colour harmony rule — is straightforward in HSL but awkward in RGB.
Each harmony mode then derives five HSL values from the base:
- Complementary: the base colour, lighter and darker variants of it, the colour 180° opposite on the wheel, and a lighter variant of that opposite.
- Triadic: the base colour plus colours at +120° and +240°, with two additional lightness variants of the base for a fuller set.
- Analogous: five colours evenly spaced at -30°, -15°, 0°, +15°, and +30° from the base hue.
- Monochromatic: the same hue and saturation at five different lightness levels (20%, 35%, 50%, 65%, 80%).
Every derived HSL value is converted back to a 6-digit hex code for display and copying.
Example: starting from #2F6FED (a signal blue) with Complementary harmony produces a base blue, a lighter and darker blue, and an orange-toned complement around 180° away on the colour wheel, plus a lighter version of that complement.Frequently Asked Questions
What is a colour palette generator?
A colour palette generator is a tool that produces a small set of colours that work well together, starting from one base colour you choose. Instead of guessing complementary shades by eye, it applies established colour theory rules — complementary, triadic, analogous, or monochromatic — to derive a palette that's mathematically related to your starting colour.
What's the difference between complementary, triadic, analogous, and monochromatic?
Complementary uses your base colour plus its opposite on the colour wheel (180° away) for high contrast. Triadic uses three colours evenly spaced 120° apart for a vibrant, balanced look. Analogous uses colours next to each other on the wheel (within 30°) for a calm, cohesive feel. Monochromatic uses only one hue at different lightness levels for a subtle, unified palette.
How do I generate a colour palette?
Pick a base colour using the colour picker or by typing a hex code, choose a harmony rule from the dropdown, and the five-colour palette updates instantly below. Click any swatch to copy its hex code to your clipboard.
What format are the generated colours in?
Every colour is shown as a 6-digit hex code (e.g. #2F6FED), the most widely supported format for CSS, design tools, and image editors. Click a swatch to copy that exact hex value.
Can I type a hex code directly instead of using the colour picker?
Yes — the text field next to the colour picker accepts any valid hex code directly, and both inputs stay in sync, so you can paste a brand colour you already have rather than visually matching it on the picker.
Is my chosen colour stored anywhere?
No. The palette is computed entirely in your browser using HSL colour math — nothing you enter is sent to a server, logged, or stored, even if you're working with an unreleased brand colour.
Does this work offline?
Yes — once the page has loaded, palette generation runs entirely client-side with no further network requests, so it continues to work without an internet connection.
Which harmony should I use for a website colour scheme?
Analogous or monochromatic palettes tend to feel calm and professional, making them a safe default for most websites and apps. Complementary and triadic palettes create more visual energy and contrast, which works well for call-to-action buttons, highlights, or brands that want to feel bold rather than subtle.
Why do my lighter and darker swatches look slightly different from a simple tint or shade?
The lighter and darker variations are generated by adjusting the lightness (the "L" in HSL) while keeping the hue and saturation fixed, which preserves the character of the colour better than naively mixing in white or black. This keeps every swatch feeling like it belongs to the same family.
Can I use this for a logo or brand identity?
Yes — many designers start exactly this way, picking one brand colour and deriving a small supporting palette from it. For final brand work, validate the chosen hex codes against accessibility contrast requirements separately, since this tool focuses on colour harmony, not contrast ratios.
What is HSL and why does this tool use it instead of RGB?
HSL (Hue, Saturation, Lightness) describes colour the way humans intuitively think about it — a position on the colour wheel, how vivid it is, and how light or dark it is. Rotating the hue by a fixed number of degrees to find a harmonious colour is straightforward in HSL but awkward to do directly in RGB, which is why colour tools convert to HSL internally before generating a palette.