DevMicroTools

CSS

Color Palette / Shade Generator

Generate a full tint/shade scale and colour harmonies from one base colour.

Runs entirely in your browser — nothing you paste is uploaded or stored.

Presets
Shade scale

Click a swatch to copy its hex value. "Base" marks the step closest to the colour you entered.

Complementary
Analogous
Triadic
Split-complementary
Tetradic
Used as: --color-brand-500, or the "brand" key.
Generated code
:root {
  --color-brand-50: #effbfe;
  --color-brand-100: #daf4fa;
  --color-brand-200: #b8e8f2;
  --color-brand-300: #8bd1e1;
  --color-brand-400: #4eb1c5;
  --color-brand-500: #0091a8;
  --color-brand-600: #007287;
  --color-brand-700: #00596c;
  --color-brand-800: #003c4b;
  --color-brand-900: #002631;
  --color-brand-950: #000f16;
}

What is color palette generator?

Modern design systems don't ship a single brand colour — they ship a scale of it, from a near-white tint used as a subtle background to a near-black shade used for text on a light surface, the exact pattern Tailwind and most component libraries use for every colour token. Hand-picking eleven consistent, evenly-spaced shades of one colour by eye is slow and easy to get visually uneven — a common failure mode is a scale that looks fine at the light end and muddy or oversaturated at the dark end. This tool generates the full scale for you from one starting colour, using the OKLCH colour space (the perceptually-uniform space modern CSS now supports natively) so lightness steps look evenly spaced to the eye rather than just evenly spaced numerically. Alongside the scale, it also generates five standard colour-harmony sets — complementary, analogous, triadic, split-complementary, and tetradic — for picking accent colours that work with your base colour by colour theory rather than guesswork, and exports the whole scale as CSS custom properties, a Tailwind config fragment, SCSS variables, or plain JSON.

When to use it

  • Turning a single brand colour into a full 50-950 shade scale for a design system or component library.
  • Generating the CSS custom properties or Tailwind config entry for a new brand colour in one step.
  • Finding an accent colour that pairs well with an existing brand colour, using an actual colour-harmony rule instead of trial and error.
  • Checking whether a colour has enough range to produce both a readable light-background tint and a readable dark-background shade.

How to use this tool

  1. Enter a base colour as hex, rgb(), or hsl() — or pick one with the colour picker.
  2. Review the 11-step shade scale; the step closest to your original colour is marked "Base".
  3. Browse the five harmony sections for accent-colour ideas that work with the base colour by colour theory.
  4. Click any swatch to copy its hex value, or choose an export format and copy the generated CSS variables, Tailwind config, SCSS, or JSON.

Example

A typical brand teal.

Input

#3cbcd4

Output

--color-brand-500: #3cbcd4;

The 500 step lands closest to the original colour; 50 is a near-white tint and 950 is a near-black shade of the same hue.

Reading the shade scale

The scale runs from 50 (lightest) to 950 (darkest), the same numbering convention used by Tailwind CSS and most component libraries, so a generated palette drops straight into an existing design system’s naming without renaming anything. Lightness is fixed per step — 50 always targets the same perceived brightness regardless of the base colour — while hue stays constant throughout and chroma (colour intensity) tapers toward both ends, since a colour pushed to near-white or near-black can’t hold as much saturation without either clipping or reading as a plain tinted grey.

Frequently asked questions

Why does the tool use OKLCH instead of simpler HSL lightness steps?

Plain HSL lightness steps don't look evenly spaced to the human eye — a blue and a yellow at the same HSL lightness value can look very different in perceived brightness, and lightening or darkening in HSL often drifts the apparent hue or crushes chroma unevenly. OKLCH is built specifically to fix this — an equal step in OKLCH lightness looks like an equal step in perceived brightness regardless of hue, which is why it's what modern browsers' native `oklch()` CSS function and newer design systems (including Tailwind's own v4 palette) are built on.

Why is my base colour not exactly one of the 11 shades?

The scale uses 11 fixed lightness targets (50 through 950) so every generated palette spans the same visual range and different palettes stay comparable to each other. Your base colour is placed at whichever step's target lightness is closest to it — marked "Base" — but unless you happened to enter a colour at exactly that lightness, the swatch won't be pixel-identical to your input. The hue and relative saturation are preserved throughout the scale either way.

What's the difference between the five harmony types?

Complementary is the base colour plus its direct opposite on the colour wheel (180° apart) — high contrast, classic accent pairing. Analogous is the base colour with its two near neighbours (±30°) — a calm, low-contrast set. Triadic is three colours 120° apart — balanced and vibrant. Split-complementary swaps the single opposite for its two neighbours (±150°/±210°) — nearly as much contrast as complementary but softer. Tetradic is four colours 90° apart — the most colours at once, best used with one dominant and the rest as accents.

Can I use the exported CSS variables directly in my project?

Yes — the CSS export is a complete `:root { --color-<name>-<step>: #hex; }` block ready to paste into a stylesheet, the Tailwind export is a config object fragment to drop into your `theme.extend.colors`, and the SCSS export is a flat list of `$color-<name>-<step>` variables. The palette name field controls the `<name>` portion of every generated identifier.

Does this check contrast or accessibility?

Each swatch picks whichever of black or white text reads better on it, so the labels stay legible, but this tool doesn't compute a WCAG contrast ratio between two arbitrary colours you choose yourself — use the Color Converter's contrast section for that, especially before pairing a specific shade with specific body text.

Find these tools useful? A coffee helps keep them free and ad-light.

Buy me a coffee