Color Palette Generator

A colour workbench that runs in your browser: harmonies, moods, locks, contrast and colour-blindness checks, tint and shade scales, gradients, exports and saved palettes.

Make a palette

Now showing: Split complementary

Base colour (hex, rgb, hsl, oklch or a name like “tomato”)

Harmony from the base colour

Moods (built from rules, tuned by your private seed)

A harmony rotates the hue of your base colour by classic angles. A mood picks lightness, chroma and hue ranges by rule, and your seed chooses the exact numbers: the same for you every time, different for everyone else. Press a mood again for another version.

Your palette

Pick colour 1 with the colour pickerPick
Near Lagoon
3.5:1 on white, 6.1:1 on black
Colour 1 (hex, rgb, hsl, oklch or a name)
Pick colour 2 with the colour pickerPick
Near Carmine
8.2:1 on white, 2.6:1 on black
Colour 2 (hex, rgb, hsl, oklch or a name)
Pick colour 3 with the colour pickerPick
Near Sienna
5.6:1 on white, 3.8:1 on black
Colour 3 (hex, rgb, hsl, oklch or a name)
Pick colour 4 with the colour pickerPick
Near Sky Blue
1.7:1 on white, 12.4:1 on black
Colour 4 (hex, rgb, hsl, oklch or a name)
Pick colour 5 with the colour pickerPick
Near Blush
3.4:1 on white, 6.1:1 on black
Colour 5 (hex, rgb, hsl, oklch or a name)

5 of 12 colours. Locked colours stay put when you generate again.

Tap a hex code to copy it. Press Space for another surprise.

Live previewyour palette on a page

Brand

New release

A headline that uses your colours

Body text on the background, so you can judge how comfortable the combination is to read for a few lines at a time.

Primary buttonSecondaryA text link

Card title

Secondary text in a card.

Badge

background: #7ed5da
surface: #7ed5da
text: #9f004a
primary: #d76585
accent: #9f5500
text on primary: #000000

The primary colour is close to the background (under 3:1), so buttons and links may be hard to see.

Roles are assigned by rule: the lightest colour becomes the page, the darkest readable one the text, and the most saturated ones the primary and accent. The preview area keeps the palette's own colours in both site themes.

Contrast checkerWCAG 2.x, every pair

Rows are backgrounds and columns are text colours. Tap a cell for details and a suggested fix. AA needs 4.5:1 for normal text (3:1 for large text), AAA needs 7:1 (4.5:1 large).

Contrast ratio of each text colour on each background colour
Background \ Text	1	2	3	4	5
1
2
3
4
5

Large heading sample

Normal body text sample, the quick brown fox jumps over the lazy dog.

Colour 2 on colour 1: 2.35:1

AA normal text: Fail
AA large text: Fail
AAA normal text: Fail
AAA large text: Fail

To reach 4.5:1 on this background, change the text colour to (same hue, adjusted lightness).

Best text colour for colour 1 from scratch: #000000 (6.1:1).

This uses the WCAG 2.x formula, the standard most accessibility rules cite. It is a guide for reading comfort, not a guarantee for every reader or screen.

How it looks with colour blindnesssimulation

As most people see it

Protanopia No red cones: reds look dark and muddy, and red can be confused with green.

Hard to tell apart: colour 1 and colour 5. They look different normally but close together here, so do not rely on colour alone to separate them (add labels, patterns or a lightness difference).

Deuteranopia No green cones: the most common type; reds and greens can look alike.

No pairs become hard to tell apart.

Tritanopia No blue cones: blues and greens, yellows and pinks can be confused. Rare.

Hard to tell apart: colour 2 and colour 3. They look different normally but close together here, so do not rely on colour alone to separate them (add labels, patterns or a lightness difference).

Achromatopsia No colour vision: only lightness is seen.

Hard to tell apart: colour 1 and colour 5. They look different normally but close together here, so do not rely on colour alone to separate them (add labels, patterns or a lightness difference).

Protanopia, deuteranopia and tritanopia use published research matrices (Machado et al., 2009) at full severity. Real colour vision varies a lot, so treat this as a guide.

Tint and shade scale (50 to 950)per colour

The hue stays fixed, lightness steps down evenly in OKLCH (so each step looks equally different), and chroma eases off at both ends. Your colour sits at the step closest to its own lightness. The Tailwind export can include these scales.

Gradient builderfrom your colours, in order

TypeBlend inAngle: 90 degrees

background: linear-gradient(90deg, #00999f 0%, #4c8b92 3.6%, #677c86 7.1%, #796c7a 10.7%, #875b6d 14.3%, #914861 17.9%, #993156 21.4%, #9f004a 25%, #9f1b45 28.6%, #a0293f 32.1%, #a03438 35.7%, #a03d31 39.3%, #a04627 42.9%, #9f4e1a 46.4%, #9f5500 50%, #a06934 53.6%, #a07c52 57.1%, #9e8e6e 60.7%, #9aa089 64.3%, #94b2a4 67.9%, #8bc3bf 71.4%, #7ed5da 75%, #95c7ce 78.6%, #a7b8c1 82.1%, #b5a9b5 85.7%, #c09aa9 89.3%, #c9899d 92.9%, #d17891 96.4%, #d76585 100%);

Colours from a pictureread on your device, never uploaded

Choose a pictureColours to find: 5

The picture is shrunk to at most 96 pixels on a hidden canvas in your browser, then grouped into similar colours (k-means in OKLab). Nothing is sent anywhere, and the picture is not kept.

ExportCSS, Tailwind, SCSS, JSON, SVG, PNG, GIMP

CSS variables

:root {
  --color-1: #00999f; /* Near Lagoon */
  --color-2: #9f004a; /* Near Carmine */
  --color-3: #9f5500; /* Near Sienna */
  --color-4: #7ed5da; /* Near Sky Blue */
  --color-5: #d76585; /* Near Blush */

  --color-lagoon: #00999f;
  --color-carmine: #9f004a;
  --color-sienna: #9f5500;
  --color-sky-blue: #7ed5da;
  --color-blush: #d76585;
}

Colour names come from the nearest match in a built-in list, so they are labels, not official names. Everything is made in your browser.

Saved palettes0 of 50

Nothing saved yet

Save a palette you like and it is kept on this device, with its name.

Recent palettes

Palettes you make appear here (the last 20), so you can go back.

How it works, honestly: harmonies rotate your base colour's hue by classic angles; moods are rules over lightness, chroma and hue in OKLCH, and your private seed picks the numbers inside them, so you get the same palettes every time and other people get different ones. Contrast uses the WCAG 2.x formula, and the colour-blindness views use published research matrices. Colour names are the nearest match from a built-in list of 148 CSS colours plus extra names written for this tool, so they are labels, not official names.

Private by design: this runs on your device and nothing you enter is uploaded. What it remembers stays in this browser. See and manage your data.

Restore a backup

← Back to the product page

About Color Palette Generator

Palettes from colour theory or mood, with locks, contrast and colour-blind checks, 50-950 scales and exports.

Pick a base colour and a harmony (complementary, split, analogous, triadic, tetradic, square, monochrome, shades), or choose a mood such as calm, earthy, neon or luxury. Moods are built from rules, and your private seed picks the numbers, so you get the same palettes each visit and other people get different ones. Lock the colours you like, check every pair against WCAG contrast, preview the palette under four kinds of colour blindness, and make 50-950 tint and shade scales. Export CSS variables, a Tailwind config, SCSS, JSON, SVG or PNG, or pull colours from a picture without uploading it.

What you get

Live tool at /play/color-palette-generator (free, unlimited use)
Commercial license: white-label/embed this tool on your own site

Contrast uses the WCAG 2.x formula. Colour-blindness views are approximations from published matrices. Colour names are the nearest match from a built-in list, not official names.

Product details, license options and more from Digital Tools →