Skip to content
anyutil.io

Colour palette generator

Pick a palette and see it on a site, an app and a phone.

Palette 1

5 coloursVibrantCoolMonochrome

Locked colours stay put when you shuffle.

BrandSign in
New

Build a site people remember

Fast, clear and in colours that work together. This palette shows how a site could look.

Start for freeLearn more
A tidy cardSurface, text and accents from the palette side by side.

Colours in this palette

Click a value to copy it.
  • Colour 1
    On white1.1FailsOn black19.3AAA
  • Colour 2
    On white1.0FailsOn black21.0AAA
  • Colour 3
    On white10.4AAAOn black2.0Fails
  • Colour 4
    On white5.2AAOn black4.1AA large text
  • Colour 5
    On white2.1FailsOn black9.8AAA

Palette as code

:root {
  --color-1: #eff6ff;
  --color-2: #ffffff;
  --color-3: #1e3a8a;
  --color-4: #2563eb;
  --color-5: #38bdf8;
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #1e3a8a;
  --primary: #2563eb;
  --accent: #1e3a8a;
}

Besides the five colours you get the roles derived from them: background, surface, text, primary and accent.

Palette library

112 palettes

More about Colour palette generator

Colour palettes with a live preview

A palette on its own tells you little: five squares look fine and the website built from them does not. Here the palette fills the width of the page and is drawn into three mock-ups (a website, an app and a phone) so you see the colours as a background, as text, as a button and as an accent before you commit.

How to use the palettes

Hit Shuffle, or the space bar, for a new palette; the padlock on a colour keeps it in place while the rest change. The library below filters by mood (light, dark, pastel, earthy and so on) and searches by colour, so a fragment of a HEX code such as 2563eb finds every palette that contains it.

Click a colour to copy its HEX code; the breakdown underneath also gives RGB, HSL, HSV and CMYK. Each colour comes with its contrast against white and black and the matching WCAG level, so you know straight away whether text will be readable on it.

Take the whole palette away as CSS custom properties, a Tailwind config, SCSS variables or JSON. Alongside the five colours you get the roles derived from them: background, surface, text, primary and accent. The palette lives in the address, so the link is ready to send to a colleague, and it downloads as a PNG too.

Frequently asked questions

How does the preview know which colour is which?

It sorts them by brightness and saturation. The lightest colour becomes the background, the darkest the text (or plain black or white when the contrast would not hold) and the most saturated ones become primary and accent. So the preview stays readable even with a bold palette.

What do the AA and AAA levels mean?

They are the accessibility levels from WCAG. Body text needs a contrast ratio of at least 4.5 : 1, which is AA; the stricter AAA asks for 7 : 1. A ratio from 3 : 1 is only enough for large text, meaning 18 pt, or 14 pt bold.

Can I use the palettes for free?

Yes. A colour cannot be copyrighted and the palettes carry no licence. Take them into a commercial project without asking.

Can I adjust a colour of my own?

For a single colour and the shades around it, use the colour wheel: it gives complementary, analogous and triadic colours with the codes to copy.

Related tools