Color Palette Generator

Colour harmonies and a Tailwind-style 50–950 scale from one base colour.

Base colour

Palette name

Tints and shades

Complementary

Opposite on the colour wheel (180°): strong contrast.

Analogous

Neighbours 30° either side: calm and cohesive.

Triadic

Three hues 120° apart: vibrant but balanced.

Tetradic

Four hues 90° apart (a square): rich, needs one dominant colour.

Split complementary

The base plus the two hues beside its complement (150° and 210°).

Monochromatic

One hue at different lightness levels.

Export

:root {
  --primary-50: #f1f6fd;
  --primary-100: #e0ebfb;
  --primary-200: #c5dafd;
  --primary-300: #9cc2ff;
  --primary-400: #639eff;
  --primary-500: #3f86fb;
  --primary-600: #2c73e6;
  --primary-700: #215fc3;
  --primary-800: #1b4fa3;
  --primary-900: #1b4486;
  --primary-950: #07214b;
}

Use via API

Generate a palette from one base colour: complementary, analogous, triadic, tetradic, split-complementary and monochromatic harmonies, plus a 50–950 tint and shade scale as CSS variables and a Tailwind theme. Send JSON, get JSON back.

POST https://pithlab.com/api/v1/tools/color-palette-generator

curl https://pithlab.com/api/v1/tools/color-palette-generator \
  -H "Authorization: Bearer $PITHLAB_KEY" \
  -H "Content-Type: application/json" \
  -d '{"color":"#0f766e","name":"teal"}'

Fields and response OpenAPI document Get an API key

About the Color Palette Generator

Build colour palettes from one base colour: complementary, analogous, triadic and more, plus a 50–950 tint and shade scale you can export as CSS or Tailwind.

How to use the Color Palette Generator

Enter a base colour or choose one with the picker.
Browse the harmonies and the tints-and-shades scale. Click any swatch to copy its hex value.
Name the palette, choose CSS variables, Tailwind v4 or Tailwind v3, and copy the export into your project.

Examples

Triadic palette from blue

Input

#3b82f6 (triadic)

Output

#3b82f6, #f63b82, #82f63b

Complementary palette from blue

Input

#3b82f6 (complementary)

Output

#3b82f6, #f6af3b

Scale as CSS custom properties

Input

#ef4444 named brand

Output

:root {
  --brand-50: #fef2f1;
  --brand-100: #fce3e1;
  --brand-200: #fecbc6;
  --brand-300: #ffa49c;
  --brand-400: #fa6b65;
  --brand-500: #ef4444;
  --brand-600: #d92c32;
  --brand-700: #b81e26;
  --brand-800: #991a1f;
  --brand-900: #7f1d1e;
  --brand-950: #470709;
}

Frequently asked questions

How is the 50–950 scale made?

Each step has a fixed perceptual lightness in OKLCH, modelled on Tailwind CSS v4's palette, and keeps your colour's hue. Chroma tapers towards the lightest and darkest steps and is reduced where needed so every swatch fits in sRGB.

Which harmony should I use?

Analogous and monochromatic palettes feel calm and are easy to use. Complementary and split-complementary give strong accents. Triadic and tetradic are lively, so pick one dominant colour and use the others sparingly.

How do I use the Tailwind export?

For Tailwind CSS v4, paste the @theme block into your main CSS file and use classes like bg-brand-500. For v3, paste the colours object into theme.extend in tailwind.config.js.

Are the palette colours accessible?

Harmonies are about hue, not contrast, so always check text against its background. As a rule of thumb, text from steps 700–950 on 50–100 backgrounds usually passes WCAG AA; use the contrast checker to be sure.