elefcode

Color Palette Generator

Press Space for a new palette. Lock the colours you like and they stay put.

The first locked colour sets the base hue.

darkslategray · 10.1:1

cadetblue · 5.7:1

burlywood · 11.3:1

sandybrown · 9.2:1

tomato · 6.1:1

Names:
:root {
  --palette-1: #264653;
  --palette-2: #2a9d8f;
  --palette-3: #e9c46a;
  --palette-4: #f4a261;
  --palette-5: #e76f51;
}

Preview

A heading in your palette

Body text sits on the lightest or last colour. Buttons and accents use the others.

Button 1Button 2Button 3Button 4

Ratios on each swatch are WCAG contrast against the text shown on it — 4.5:1 or more passes AA for body text. Check any pair in the Contrast Checker.

Advertisement

Guide

About the Color Palette Generator

A colour palette is the small set of colours a design is built from — usually a dark tone for text, a light one for backgrounds and a few accents for buttons and highlights. This generator proposes palettes that work together, lets you keep the colours you like, and exports them as code you can paste straight into a project.

Colours are generated in OKLCH, a colour space that matches how people perceive lightness, so harmonies stay balanced instead of producing one colour that glows next to another that looks dull.

Colour harmonies explained

  • Analogous — neighbouring hues; calm and cohesive.
  • Monochromatic — one hue at several lightness levels; clean and safe.
  • Complementary — opposite hues; high contrast and energy.
  • Split-complementary — a hue plus the two beside its opposite; vivid but easier to balance.
  • Triadic and tetradic — three or four evenly spaced hues; playful, best with one dominant colour.

Building a palette from your brand colour

Type your brand colour into the first swatch, lock it, and pick a harmony. Every new palette now starts from that hue. For the full 50–950 scale of any one colour, use the Tailwind Shades tool.

How to use it

  1. 1Press Space or Generate until you see a palette you like.
  2. 2Lock the colours to keep, or type a hex code into any swatch.
  3. 3Choose a harmony to steer the next palettes.
  4. 4Pick an export format and copy or download the code.

Frequently asked questions

How do I keep a colour while generating new ones?

Click the lock icon on the swatch. Locked colours stay in place, and the first locked colour sets the base hue for the harmony.

Can I use these colours in Tailwind?

Yes. Choose Tailwind v3 for a tailwind.config.js colours block, or Tailwind v4 for an @theme block of --color-* variables.

What do the ratios on each swatch mean?

They are the WCAG contrast ratio between the swatch and the text drawn on it. 4.5:1 passes AA for normal text and 3:1 for large text.

Why OKLCH instead of HSL?

HSL lightness does not match what we see — HSL yellow looks much brighter than HSL blue at the same value. OKLCH is perceptually even, so generated colours sit together better.

Can I share a palette?

Yes. Use the share button in the toolbar; the link reopens the same colours and settings.

Related tools

Tailwind ShadesContrast CheckerColor ConverterImage Color Picker