Colour Palette Generator at a glance
- What it does
- Generate colour palettes, lock the shades you like and regenerate the rest. Includes practical guidance on building a usable design system palette.
- Where it runs
- Entirely in your browser — no data is uploaded
- Works offline
- Yes, once the page has loaded
- Cost
- Free, with no account and no usage limit
- Category
- Design & Colors
How to use the palette generator
- Press space or the generate button for a new palette.
- Lock any colour you want to keep; the rest regenerate around it.
- Repeat until the whole set works together.
- Copy the hex values into your design tool or stylesheet.
Colour relationships that work
Harmony schemes are recipes based on positions around the colour wheel. They are a starting point rather than a rule, but they explain why some combinations feel resolved and others do not.
| Scheme | Relationship | Character |
|---|---|---|
| Monochromatic | One hue, varied lightness and saturation | Calm and cohesive. Hard to get wrong, easy to make dull. |
| Analogous | Neighbouring hues, within about 30° | Natural and comfortable. Needs one dominant colour to avoid mush. |
| Complementary | Opposite hues, 180° apart | Maximum contrast and energy. Use one as an accent, not fifty-fifty. |
| Split-complementary | A hue plus the two neighbours of its opposite | Most of the contrast, less of the tension. A reliable default. |
| Triadic | Three hues 120° apart | Vivid and balanced. Needs careful weighting or it becomes noisy. |
What a product palette actually needs
Five pretty swatches are not a design system. A real interface palette has specific roles, and building it around those roles saves a great deal of retrofitting later.
- One primary colour, with a range of lightness steps from very light to very dark. Nine steps is a common convention.
- A neutral ramp - greys for text, borders, backgrounds and dividers. This is the majority of what an interface uses, and it is what beginners under-specify.
- Semantic colours for success, warning, error and information. Green, amber, red and blue, each with a light background variant for banners.
- One accent, used sparingly for the thing you most want people to click.
Tint your neutrals slightly toward the primary hue rather than using pure grey. It costs nothing and makes the whole interface feel deliberate.
Contrast is not optional
A palette that fails contrast requirements is unusable regardless of how it looks. WCAG requires 4.5:1 between body text and its background, and 3:1 for large text and for interface components such as form borders and icons.
Two practical points. First, check your colours against both light and dark backgrounds if you support both themes - a mid-tone that works on white often fails on charcoal. Second, colour must never be the only carrier of meaning: around 8% of men have some form of colour vision deficiency, so a red-versus-green status indicator needs an icon or a label as well.
Test the palette in greyscale. If the hierarchy survives without hue, it will survive anything.
Practical advice
Fewer colours than you think. One primary, one accent and a good neutral ramp covers most products. Every extra hue is another decision to make consistently.
Look at large areas, not swatches. A colour that is striking in a 60-pixel square can be overwhelming as a page background. Test at real proportions.
Watch the 60-30-10 proportion. Roughly 60% dominant, 30% secondary, 10% accent is a reliable starting balance.
Check on a real screen. Colours shift noticeably between an uncalibrated laptop, a phone in sunlight and a cheap external monitor.
Name by role, not by colour. --color-primary survives a rebrand; --color-blue becomes a lie the moment the brand turns green.
Frequently asked questions
For an interface: one primary with several lightness steps, a neutral ramp, four semantic colours and perhaps one accent. For a poster or illustration, three to five is a common working range.
Measure contrast ratios for every text-on-background pairing you will actually use, aiming for 4.5:1 on body text. Then view the palette in greyscale to confirm the hierarchy does not depend on hue alone.
Yes. Colours are not copyrightable. Specific brand colours can be protected as trade dress in narrow contexts, but an ordinary palette carries no restrictions.
Uncalibrated displays vary considerably in brightness and colour temperature, and some render a wider gamut than sRGB. Design with adequate contrast so the result survives that variation.
Nothing you enter here leaves your browser
Colour Palette Generator does its work in JavaScript running on your own device. The page loads once, and after that there is no upload step and no server involved — which matters here because images carry metadata, and unreleased artwork should not be uploaded to convert it.
You can verify this rather than taking our word for it: load the page, disconnect from the internet, and the tool keeps working. Our privacy policy sets out what is and is not collected, and this guide explains why the distinction matters.