Color & Typography

Color Shade Generator

Turn one base color into a complete lighter-and-darker shade scale, then copy or download it as CSS variables, JSON design tokens or a Tailwind config. Everything runs in your browser.

Runs in your browser v1.0.0

Base color & scale

OKLCH

Base color

Hex, rgb(), hsl() or a color name.

Shade method

OKLCH keeps the steps visually even across the scale. This is the best default.

Steps 11

The base color sits in the middle of the scale.

Range 90%

How far the lightest and darkest steps reach.

Token name

Used for the CSS variables and config keys.

Shade scale

live

— —

Output format

How it works

Your base color becomes the middle step, then every other step moves toward white or black. Perceptual (OKLCH) adjusts lightness in a perceptually even space and gently reduces chroma at the extremes; HSL lightness keeps the exact hue and saturation; tint & shade blends toward pure white and black in sRGB. Click any swatch to preview and copy its hex, pick an output format, then copy or download the scale. Try #3b82f6, #ef4444 or rgb(16, 185, 129). Everything runs in your browser — your colors never leave the page.

Practical uses

Generate a lighter-to-darker shade scale from one base color using OKLCH, HSL or sRGB tint-and-shade, then emit CSS variables, a Tailwind config or JSON tokens.

Common ways to use it

Build a 50–950 scale for a brand color to use as CSS custom properties.
Produce a Tailwind colors object from a single hex value.
Get a quick set of tints and shades for a UI accent.

Five-step OKLCH scale from #3b82f6

Input

Base color: #3b82f6
Method: Perceptual (OKLCH)
Steps: 5
Range: 90%
Token name: brand
Output: CSS variables

Output

:root {
  --brand-300: #ecf3ff;
  --brand-400: #94bdff;
  --brand-500: #3b82f6;
  --brand-600: #00327f;
  --brand-700: #00000b;
}

Verified with the tool's analyze function. The base color becomes the middle 500 step; the labels shift with the step count (5 steps give 300–700, 11 steps give 50–950).

Options that matter

Base color — hex (3/4/6/8-digit), rgb()/rgba(), hsl()/hsla() or a short list of color names.
Shade method — Perceptual (OKLCH), HSL lightness, or Tint & shade (sRGB mixing toward white and black).
Steps — 3 to 11; an even value is rounded to the nearest odd count so the base stays centred.
Range — 40% to 100%, controlling how far the lightest and darkest steps reach.
Token name — prefix for the generated CSS variables and config keys.
Output format — CSS variables, Tailwind config or JSON tokens; copy or download the result.

Things to keep in mind

Only hex, rgb()/rgba(), hsl()/hsla() and a short named-color list are parsed; hsv(), hwb(), cmyk() and lab() inputs are not accepted here.
OKLCH output reduces chroma when a target step falls outside the sRGB gamut, so the displayed hex is the gamut-mapped result.
Count is clamped to 3–11 and forced odd, so not every requested step count is possible.
The scale always moves toward pure white and black; there is no custom endpoint color.