colour tool
Colour palette generator
Type or pick one seed colour and this colour palette generator builds a 5 to 8 colour palette in four schemes: monochrome, analogous, triadic and split complementary. Every swatch lists its hex, RGB and HSL values and grades white and black text on it against WCAG.
Loading the tool…
- Runs on your device, nothing is uploaded
- Free, no sign in
- No watermark, no file limit
How it works
- 1
Set the seed colour
Type a hex value, an rgb(), an hsl() or a CSS name, open the swatch picker, or press Random seed for a fresh starting point.
- 2
Choose the size
Pick 5, 6, 7 or 8 from the Colours list. All four schemes rebuild at once.
- 3
Pick a scheme
Click Monochrome, Analogous, Triadic or Split complementary. Each button carries a preview strip, and the list underneath shows the chosen scheme in full.
- 4
Read, then copy
Each swatch shows hex, RGB, HSL and two contrast grades. Click a swatch to make it the new seed, or copy the hex codes or CSS variables, or download the JSON.
How the four schemes are built
Monochrome keeps your hue and walks lightness in even steps from very light to dark, then swaps the step nearest your seed for the seed itself, so your colour is always in the set. Analogous spreads neighbouring hues across 120 degrees of the wheel with the seed in the middle. Triadic takes three hues 120 degrees apart, and split complementary takes your hue plus the two either side of its opposite, at 150 and 210 degrees. When a palette needs more colours than a scheme has hues, the hues repeat one tier lighter, then one tier darker.
Why OKLCH and not HSL
HSL lightness is arithmetic on red, green and blue, not on what the eye sees, so a yellow and a blue at the same HSL lightness look nothing alike in brightness. OKLCH, the polar form of the OKLab space Björn Ottosson published in 2020 and now part of CSS Color 4, was fitted to perception, so equal steps look equal. This page also keeps chroma as a share of what each hue can reach on a normal screen, which means a muted seed produces a muted palette instead of one muted swatch among neon ones.
Reading the contrast grades
Every swatch carries two badges: white text on it and black text on it. AA means the pair reaches 4.5 to 1, the WCAG minimum for body text; AAA means 7 to 1; large only means it sits between 3 and 4.5, which is enough for headings of 24 pixels or more but not for paragraphs. A palette usually needs at least one swatch that passes with white and one that passes with black, so that text has somewhere to live.
Using the palette in a flyer, deck or document
In the flyer builder, any text can take a custom hex colour, so the swatches can be pasted straight into a heading or a price. For a whole look, the brand kit in Settings stores a Primary, a Secondary and an Accent colour, and a Your brand group then appears in the theme picker of slides, flyers, forms, documents and videos. A sensible split is the seed as Primary, a darker monochrome step as Secondary and a split complementary swatch as Accent.
Limits worth knowing
Because the maths runs in OKLCH, the same seed in an HSL based generator will give different answers, and neither is wrong. Out of gamut colours are pulled back to the nearest one an sRGB screen can show, and a neutral grey seed has no hue to rotate. Nothing leaves this page: the palette is arithmetic in your browser, nothing is uploaded and nothing is stored, ever. The seed, scheme and size sit in the address bar, so a copied link reopens the same palette.
Limits
- Schemes are computed in OKLCH, so the result differs from an HSL colour wheel tool: the same seed and scheme can give other hues and other lightness steps.
- Colours an sRGB screen cannot show are pulled back in chroma, so a very vivid seed gives slightly calmer neighbours.
- A neutral grey seed has no hue, so the hue based schemes return greys.
What it does not do
- It does not pull colours out of a photo or a logo. The palette extractor does that.
- It does not score one swatch against another, only white and black text on each. The colour contrast matrix checks every pair.
- It does not save palettes anywhere. Copy them or download the JSON.
Questions people ask
How many colours should a brand palette have?
Most working brand palettes hold one main colour, one or two supporting colours, an accent used sparingly, and two neutrals for text and backgrounds. That is five or six, which is why this tool starts at five. More than eight usually means some colours never get used, or get used inconsistently, and the brand starts to look different on every page.
Is the same palette produced every time for one colour?
Yes. The schemes are fixed arithmetic on the seed, so the same seed, scheme and size always give the same swatches, on any device. Only the Random seed button involves chance, and it only picks a new starting colour. Copying the page address keeps all three settings, so a colleague who opens the link sees exactly the palette you saw.
Why does my seed look different in the triadic palette?
It does not change: the seed is always the first swatch of the triadic and split schemes and the middle of the analogous one. What changes is its neighbours. A strong orange next to two calmer partners can look brighter than it did on its own, which is simultaneous contrast, an effect of perception rather than of the numbers.
Which scheme suits a business presentation?
Monochrome or analogous schemes read as calm and consistent, which suits reports, finance and healthcare decks. Triadic and split complementary give charts distinct series colours and suit launches, events and education. Whatever you pick, keep one colour for emphasis only, and check that the colour you put text on carries an AA badge for white or black text.
Can I start from a colour in my logo?
Yes, if you know its value. Read the hex from the brand guidelines, or use the colour picker from image tool on the logo file to read the exact pixel, then paste that value here as the seed. The palette is then built around the real brand colour rather than a guess that is a few shades off.
What does large only mean on a swatch?
It means the contrast with that text colour is between 3 and 4.5 to 1. WCAG allows that for large text, which is 24 pixels, or about 18.7 pixels in bold, and for icons and borders. It is not enough for paragraphs, captions or form labels, so use that pairing for headings and pick a darker or lighter swatch for body copy.
Design something in this palette
Take what you made here into flyers.
Create a flyer with OneCraftMore tools like this
- Tints and shades generatorTints and shades generator: 10 lighter and 10 darker steps of any colour, with hex values and the contrast of black and white text on each.
- Complementary colour finderComplementary colour finder: enter a colour to get its complement, the two split complementary colours and an accent that passes WCAG contrast on it.
- Colour contrast matrixColour contrast matrix: paste 2 to 12 colours and see every pair's WCAG ratio with AA and AAA marks, and which pairs are safe for body text.
- Palette extractorCluster a photograph in CIE Lab and get the colours it is made of, each with its share of the pixels and a suggested design role. Runs in your browser.
- CSS gradient generatorCSS gradient generator: set 2 to 5 colour stops, an angle and a linear, radial or conic type, then copy the CSS or download a PNG at any size.
- Colour converterPick a colour on a live OKLCH plane and read it in nine notations at once, with the sRGB gamut boundary drawn and the contrast on white and black shown.
Background reading: the question page on this.
Written and checked by the OneCraft team. Last checked .