Open menu

Color Palette Generator

Turn one brand color into a complete palette. Choose a harmony (monochromatic, analogous, complementary, split-complementary, triadic or tetradic) for accent colors, and get an eleven-step shade scale from 50 to 950 built with perceptual OKLCH lightness, so the steps look even. Each swatch shows whether it is safe for text on white or black, and you can export CSS custom properties, an SCSS map, a Tailwind theme or W3C design-token JSON.

Preset gallery
Base#4F46E5AA on white
Accent 1#776600AA on white
50#F2F4FFAA on black
100#E4E8FFAA on black
200#CDD5FFAA on black
300#B1BCFFAA on black
400#8A96FFAA on black
500#6C71FFAA on black
600#5654E9AA on white
700#443FC1AA on white
800#35319AAA on white
900#28267AAA on white
950#16144FAA on white

Accessibility checks

  • Pass Shades with 4.5:1 or more against white (safe for text on white): 600, 700, 800, 900, 950.
  • Pass Shades with 4.5:1 or more against black (safe for text on dark backgrounds): 50, 100, 200, 300, 400, 500.
  • Pass The base color has enough chroma for a distinct scale.

Export code

:root {
  --brand-50: #F2F4FF;
  --brand-100: #E4E8FF;
  --brand-200: #CDD5FF;
  --brand-300: #B1BCFF;
  --brand-400: #8A96FF;
  --brand-500: #6C71FF;
  --brand-600: #5654E9;
  --brand-700: #443FC1;
  --brand-800: #35319A;
  --brand-900: #28267A;
  --brand-950: #16144F;
  --brand-accent-1: #776600;
}
Favourites on this device (0)

No favourites yet.

Palette
Base color

How to use the palette generator

  1. Choose a base color, such as your brand color.
  2. Pick a harmony for the accent colors: complementary for strong contrast, analogous for calm, triadic for variety.
  3. Adjust hue drift if you want the scale to warm or cool towards its ends.
  4. Name the palette for the export (for example brand or indigo).
  5. Review the checks to see which shades are text-safe.
  6. Export CSS variables, an SCSS map, Tailwind (v4 @theme and a v3 config) or JSON design tokens.

Using a shade scale

  • 50–100: subtle backgrounds, hover states, selected rows.
  • 200–300: borders and dividers on light themes.
  • 400–500: icons, accents, large decorative elements.
  • 600–700: buttons, links and text on white.
  • 800–950: headings, dark surfaces and dark-mode backgrounds.

How it works

The base color is converted to OKLCH, which separates lightness, chroma (colorfulness) and hue. Harmonies such as complementary, analogous and triadic rotate the hue while keeping lightness and chroma. The shade scale sets fixed lightness targets for each step from 50 to 950 and reduces chroma where needed to stay inside the sRGB gamut, so every shade is a real, displayable color. Text-safe shades are marked by checking their contrast against white and black.

Worked examples

Example 1: a SaaS brand

Load Indigo with the complementary harmony. Use 600 for primary buttons (white text passes), 50 for selected states, and the amber accent for highlights such as “new” badges.

Example 2: a calm health app

Load Teal with triadic harmony and pull back the accent colors’ use to illustrations. Teal 700 works for links and 100 for soft section backgrounds.

Example 3: neutral greys

Load Slate. A slightly blue-tinted grey scale looks crisper than pure grey. Use 900 for text, 600 for secondary text and 200 for borders.

Common mistakes

  • Using mid shades for text. 400–500 rarely pass on white; check the list.
  • Too many accent colors. One base plus one accent is usually enough for UI.
  • Ignoring dark mode. Plan which shades swap roles on dark backgrounds.

Using a palette in practice

Pick a small set of roles first: a background, a surface, text, muted text, a primary action and a status color or two. Assign palette steps to those roles, then check every text pairing for contrast. The 50–950 scale makes this easier because light steps work for backgrounds and dark steps for text. Keep a record of which step plays which role so new pages stay consistent. Revisit the palette after real use; small adjustments are easier than a full redesign later.

Frequently asked questions

How is the shade scale built?

Each step has a target OKLCH lightness, from very light at 50 to very dark at 950. Chroma follows the base color but tapers at the light and dark ends, as real paint tints and shades do. Colors that would fall outside sRGB are brought in by reducing chroma.

Why OKLCH instead of mixing with white and black?

Mixing with white makes colors look washed out and shifts some hues; mixing with black makes them muddy. OKLCH keeps the hue stable and makes the lightness steps look evenly spaced.

Which shades can I use for text?

The checks list the shades with at least 4.5:1 contrast against white (for text on light backgrounds) and against black (for dark mode). Usually 600–950 work on white and 50–300 on black.

What is hue drift?

It rotates the hue slightly across the scale, warmer in the lights and cooler in the darks or the reverse, which can make a palette feel more natural. Leave it at 0 for exact hues.

How many shades does the scale have?

Eleven, from 50 (lightest) to 950 (darkest), matching the naming many design systems and Tailwind use, so the colours drop straight into an existing setup.

Sources