Skip to content
ToolMug

Use ↑ ↓ to move, Enter to open, Esc to close.

Color Palette Generator

Press Generate (or the space bar) for a fresh palette. Lock the colours you want to keep, pick a harmony such as analogous or complementary, and check at a glance which colours are readable as text on which backgrounds. Copy the result as CSS variables, Tailwind theme colours or plain HEX codes.

Runs in your browser — nothing you enter is uploaded

  • 🎨

    #22333B

    White text 13.1:1 AAA

  • 🎨

    #3D6B72

    White text 5.9:1 AA

  • 🎨

    #7FB3A8

    Black text 8.9:1 AAA

  • 🎨

    #E6D3A3

    Black text 14.2:1 AAA

  • 🎨

    #F4EFE6

    Black text 18.3:1 AAA

Export

:root {
  --color-1: #22333b;
  --color-2: #3d6b72;
  --color-3: #7fb3a8;
  --color-4: #e6d3a3;
  --color-5: #f4efe6;
}

Preview

A heading in your palette

Body text uses the darkest colour on the lightest one, so you can judge whether a page built from this palette is easy to read.

ButtonA link

Text on background 11.4:1 · link on background 5.2:1

Which colours work together as text and background

Each cell shows text in the row colour on the column colour. AA (4.5:1) is the WCAG minimum for body text, AAA is 7:1, and “AA large” (3:1) is enough only for large or bold headings.

Text ↓ / background →#22333b#3d6b72#7fb3a8#e6d3a3#f4efe6
#22333b2.2✗5.6AA8.9AAA11.4AAA
#3d6b722.2✗2.5✗4AA large5.2AA
#7fb3a85.6AA2.5✗1.6✗2.1✗
#e6d3a38.9AAA4AA large1.6✗1.3✗
#f4efe611.4AAA5.2AA2.1✗1.3✗
Is this tool working for you?

How to use

  1. Press Generate or the space bar until you see colours you like.
  2. Click 🔒 on a colour to keep it, or type a HEX code or use 🎨 to set your own; the next palette is built around the locked colours.
  3. Check the contrast table, then copy the palette in the format you need or download it as a PNG.

Options explained

Colour harmony
Analogous uses neighbouring hues, monochrome one hue in different lightness, complementary opposite hues, triadic three evenly spaced hues, split complementary a hue plus the two next to its opposite. “Any” picks one at random each time.
Locked colours
Stay exactly as they are. The first locked colour that is not grey also sets the base hue for the others.
Contrast table
Each cell is text in one palette colour on another. AA (4.5:1) is the WCAG 2 minimum for body text, AAA is 7:1, and 3:1 is enough only for large or bold text.
Share link
The colours are saved in the page address (#22333b-3d6b72-…), so you can bookmark a palette or send it to someone.

Picking a harmony

Harmony Looks Good for
Monochrome One hue from dark to light Calm interfaces, brand shades, charts with one series
Analogous Neighbouring hues, e.g. teal to blue Natural, soft palettes for photos and illustrations
Complementary Two opposite hues One accent colour that stands out from the rest
Triadic Three hues 120° apart Playful, colourful designs
Split complementary A hue and the two beside its opposite Contrast with less clash than complementary

Making a palette that works on a website

  1. Use the lightest colour as the page background and the darkest for text — the preview shows exactly this pairing.
  2. Pick the boldest colour for buttons and links. Check its contrast against the background; links need 4.5:1 to pass AA.
  3. Keep the middle colours for borders, panels, tags and illustrations, where contrast matters less.

Frequently asked questions

How are the colours chosen?

In the OKLCH colour space, which matches how bright colours look to the eye. Hues follow the chosen harmony, lightness runs from dark to light across the palette, and saturation is kept inside what a normal sRGB screen can show.

How do I make a palette from one brand colour?

Type your colour into any slot, lock it, choose Monochrome or Analogous and press Generate. The other colours are built around its hue.

Which colour should I use for text?

Each swatch shows whether black or white text reads better on it and the contrast ratio. For text in palette colours, use the table — only pairs marked AA or AAA are safe for body text.

How do I use the Tailwind export?

It is a Tailwind CSS v4 @theme block. Paste it into your main CSS file and you get classes such as bg-palette-1 and text-palette-3.

Privacy

This tool runs entirely in your browser. Your files and text are processed on your device and are never uploaded to our servers.

Related tools