Color Palette Generator
ArdoHue
Build a colour palette from a base colour or at random, in three to eight colours. Click any swatch to copy its HEX, or copy the whole set as CSS variables. Free, no sign-up required.
Tip: press Space to generate a new palette.
How it works
-
Start from a colour, or from nothing
Pick your brand colour and the palette is built around it, or leave the page to choose. Anywhere from three to eight colours.
-
Generate until one fits
Every press of the button, or of Space, gives a fresh set. Each label stays readable on its own swatch.
-
Copy what you need
Click a swatch for its HEX code, or take the whole palette at once as CSS variables.
What people use it for
Brand colours
A small business, a podcast or an Etsy shop that needs three or four colours that belong together, starting from the one already in the logo.
Website themes
A background, a text colour and an accent for a blog or portfolio, pasted straight into the stylesheet as CSS variables.
Social media posts
One set for posts, stories and highlight covers, so an Instagram grid looks planned rather than accidental.
Weddings and events
Invitations, signage and table cards in one family of colours, with HEX codes the printer and the designer can both work from.
Questions
- Can I build a palette from my brand colour?
- Yes. Pick it as the base colour and the palette is rebuilt around its hue as you choose. Your exact code will not necessarily be one of the swatches, since each one is adjusted for brightness and contrast, so keep the original alongside the palette rather than replacing it.
- Will text be readable on every colour?
- Black or white text will be. Each swatch is nudged until its label, in whichever of the two reads better, clears the WCAG AA contrast ratio of 4.5:1. That makes every colour safe as a background for plain text. It does not make any two swatches safe to put on each other, so check a coloured-text pairing before you use it.
- How many colours should a palette have?
- Five suits most projects: a main colour, an accent, and a light and a dark for backgrounds and text. A simple brand can live on three. Go up to eight when a website needs separate colours for buttons, alerts and charts, and keep the extra ones for small areas.
- How do I use the colours in Canva, Figma or CSS?
- Click a swatch to copy its HEX code and paste it into the colour field of Canva, Figma, Photoshop, PowerPoint or Word, which all accept HEX. For a website, "Copy CSS variables" gives you the whole set as
--color-1to--color-n, ready to paste into a stylesheet. - Can I get the same palette again later?
- Not automatically, and there is no share link yet: each generation is new. Copy the HEX codes or the CSS variables as soon as you find a palette you like, and paste them somewhere you will keep.
- How are the colours chosen?
- Each palette walks a shared family of hues across a ramp from light to dark, so the colours read as a set rather than random noise. The walk is capped so that even eight colours stay related to the first. Neighbouring swatches are kept far enough apart to tell from each other, and each one is then adjusted until its label clears AA contrast.
- Can I export the palette for Tailwind or Sass?
- Yes. Switch the export dropdown from CSS variables to Tailwind config or SCSS variables before copying — the swatches on screen stay the same, only the text you copy changes shape.
- Can I build a palette from a photo?
- Yes. "Extract from a photo" finds the dominant colours in an uploaded image and turns them into swatches, each nudged just enough to keep its label readable. It's a one-time extraction, not a live link to the file, so a later count or colour change generates a fresh palette rather than re-reading the photo.