Color Palette Generator
Build a five-colour palette from any base colour using six harmony methods, then check any two swatches against the WCAG contrast thresholds before you ship them. Export straight to CSS variables, SCSS, Tailwind config, Figma tokens or JSON, or extract a palette from an image you upload. Everything runs in your browser — the image never leaves your device. Free, no signup.
Select two swatches above to compare their contrast.
How to Use This Tool
- Pick a base colour — type a hex value or use the colour picker. Press Random for a starting point, or upload an image to pull colours from it.
- Choose a harmony method — complementary, analogous, triadic, tetradic, monochromatic or split-complementary, then fine-tune with the saturation and lightness sliders.
- Check the contrast — click any two swatches to see their contrast ratio and whether the pair passes WCAG AA and AAA for normal and large text.
- Export the palette — switch format tabs and copy or download the palette as CSS variables, SCSS, a Tailwind config, Figma tokens or JSON.
About Colour Harmony & Accessible Palettes
Colour harmony is the practice of choosing colours whose relationships on the colour wheel are mathematically consistent, and it works because the eye reads those relationships as deliberate rather than accidental. Complementary pairs sit opposite each other and produce the strongest possible contrast, which is why they suit calls to action. Analogous colours sit next to each other and feel calm and cohesive, making them a natural fit for backgrounds and long-form reading. Triadic and tetradic schemes space colours evenly around the wheel for vibrant, balanced sets. Monochromatic palettes vary only lightness, which is the safest way to build a system that never clashes.
All of these are generated in HSL rather than hex or RGB, and that choice matters. Hex and RGB describe how much of each primary light to mix, which is convenient for a screen but meaningless to a designer: nothing about #0070E0 tells you what happens if you want it slightly lighter. HSL separates hue, saturation and lightness into independent numbers, so rotating the hue by 180 degrees gives you the complement directly, and adjusting lightness gives you a tint or shade without disturbing the colour itself. That is why the saturation and lightness sliders here can shift an entire palette while keeping its internal relationships intact.
A palette that looks good and a palette that is usable are different things, which is what the contrast checker is for. WCAG defines contrast as a ratio between the relative luminance of two colours, running from 1:1 for identical colours to 21:1 for pure black on pure white. The thresholds that matter are 4.5:1 for normal body text at AA, 3:1 for large text at AA, and 7:1 for normal text at the stricter AAA level. These are not arbitrary: they are calibrated to remain readable for users with moderately low vision or colour deficiency, and in many jurisdictions AA is a legal requirement for public-facing services rather than a nice-to-have.
The most common accessibility mistake in brand work is picking a mid-tone brand colour and then setting white text on it. Mid-tone blues, greens and oranges frequently land between 2:1 and 4:1 against white, which looks acceptable to a designer on a bright calibrated monitor and becomes genuinely hard to read on a phone outdoors. The fix is rarely to abandon the brand colour. Usually you keep it for large display type, logos and decorative fills, and pair it with a darker variant for body copy. Checking the ratio before the palette is signed off costs nothing; discovering it after the design system has shipped is expensive.
When it comes to applying a palette, the 60-30-10 rule is a reliable starting point: roughly 60 percent of a layout in a dominant neutral, 30 percent in a secondary colour, and 10 percent in an accent reserved for the things you actually want clicked. The most common failure in brand colour work is not choosing bad colours but using too many of them equally, which leaves nothing to draw the eye. Exporting to CSS variables, Tailwind config or design tokens is what keeps that discipline intact once the palette leaves the design file, since named tokens make it obvious when someone reaches for the accent colour a sixth time.
Pair this with our CSS Gradient Generator to blend palette colours, the Business Card Generator to see them on print-ready collateral, and the Box Shadow Generator for depth that matches your palette.
Frequently Asked Questions
What is colour harmony and why does it matter?
Colour harmony describes sets of colours whose positions on the colour wheel follow a consistent geometric relationship. Complementary colours sit directly opposite each other, analogous colours sit next to each other, triadic colours are spaced evenly at 120 degrees, and tetradic schemes form a rectangle. It matters because the eye reads these relationships as intentional. A palette assembled from unrelated hues tends to look accidental even when each individual colour is attractive, while a harmonious set feels designed. Starting from a harmony rule also gives you a defensible reason for each colour, which is far easier to justify in a review than personal preference.
What is the difference between complementary and analogous colours?
Complementary colours sit opposite each other on the wheel, roughly 180 degrees apart, and produce the maximum possible contrast between two hues. That makes them excellent for drawing attention to a single element such as a call-to-action button, but exhausting if used in equal amounts across a whole layout. Analogous colours sit within about 30 degrees of each other and share an underlying hue, so they blend smoothly and feel calm and cohesive. They suit backgrounds, gradients and long-form reading, but offer little contrast on their own, so an analogous scheme usually needs a separate accent colour to create emphasis.
What do WCAG AA and AAA contrast ratios mean?
They are the two conformance levels defined by the Web Content Accessibility Guidelines for text legibility. Level AA, the level most organisations target and many regulations require, needs a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text, meaning 18pt and above, or 14pt bold and above. Level AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. The ratio itself compares the relative luminance of the two colours and ranges from 1:1 for identical colours to 21:1 for black on white. AA is the practical target for most product and marketing work.
What is the 60-30-10 rule?
It is a proportion guideline borrowed from interior design: about 60 percent of a composition uses a dominant colour, usually a neutral background, about 30 percent uses a secondary colour for supporting surfaces and sections, and about 10 percent uses an accent reserved for the elements you most want noticed, such as primary buttons and links. The value of the rule is not the exact numbers but the hierarchy it enforces. The most common failure in brand colour work is using several strong colours in roughly equal amounts, which leaves the eye with nothing to prioritise and makes an interface feel noisy regardless of how good the individual colours are.
How does extracting colours from an image work?
The image is drawn onto a canvas in your browser, scaled down so the analysis is fast, and every pixel is read. Each pixel is grouped into a coarse colour bucket, transparent pixels are skipped, and the buckets are ranked by how many pixels fall into them. The tool then walks that ranking and picks the five most common colours, skipping any that are too visually close to one already chosen so you get a varied palette rather than five shades of the same blue. The whole process happens on your device using the canvas API, so the image is never uploaded anywhere.
Why does my brand colour fail the contrast check?
Almost always because it is a mid-tone. Contrast depends on relative luminance rather than on how vivid a colour looks, and mid-tone blues, greens, oranges and reds sit too close to white in luminance to reach 4.5:1 against it, even when they look strong and saturated. The usual fix is not to change the brand colour but to change where you use it. Keep it for large display type, logo marks, borders and decorative fills, all of which need only 3:1 or nothing at all, and derive a darker variant of the same hue for body text and small labels. The monochromatic harmony here is a quick way to generate that darker variant.
Which export format should I use?
It depends where the palette is going. CSS custom properties are the most portable option and work in any project without a build step, which makes them a good default. SCSS variables suit codebases already compiling Sass. The Tailwind config block drops straight into the theme.extend.colors section so your palette becomes utility classes. Figma tokens follow the design-token JSON shape that most token plugins and sync tools expect, which is the right choice when designers and developers need a shared source of truth. Plain JSON is the escape hatch for anything else, and includes hex, RGB and HSL values for each colour.
Are the colours generated randomly?
No. Every colour is derived mathematically from the base colour you provide. The base is converted from hex into HSL, the chosen harmony rule rotates the hue by a fixed number of degrees, and the saturation and lightness sliders apply a consistent offset across the whole set. That means the same base colour and the same settings always produce the same palette, which is what you want when you need to reproduce a result or explain how you arrived at it. The only random element is the Random button, which simply picks a new starting colour for you.