Scale Generator

Turn any color into an 11-step design-system scale (50→950): perceptually even OKLCH interpolation with the source color anchored at its nearest step, WCAG contrast vs white/black on every step, one-click export to Tailwind / CSS variables / SCSS / JSON.

#--11 step

#faf3fc

50profile →

vs white 1.09
vs black 19.29

#f3e1f8

100profile →

vs white 1.24
vs black 16.94

#e9cbf2

200profile →

vs white 1.47
vs black 14.29

#deb3eb

300profile →

vs white 1.79
vs black 11.75

source step#d099e0

400profile →

vs white 2.25
vs black 9.31

#bd7ad1

500profile →

vs white 3.06
vs black 6.87

#a85ebe

600profile →

vs white 4.19
vs black 5.01

#9142a7

700profile →

vs white 5.93
vs black 3.54

#782a8d

800profile →

vs white 8.35
vs black 2.51

#5d1570

900profile →

vs white 11.62
vs black 1.81

#40034f

950profile →

vs white 15.63
vs black 1.34

// tailwind.config.js / @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
        50: "#faf3fc",
        100: "#f3e1f8",
        200: "#e9cbf2",
        300: "#deb3eb",
        400: "#d099e0",
        500: "#bd7ad1",
        600: "#a85ebe",
        700: "#9142a7",
        800: "#782a8d",
        900: "#5d1570",
        950: "#40034f",
        },
      },
    },
  },
};

How the shade generator works - enter, check, export.

Pull an 11-step design-system scale from one color, perceptually uniform in OKLCH.

01
Enter
Paste a HEX, or hit "Build scale" on any color page to bring the value in.
02
Check
Your color snaps to its nearest step; WCAG contrast vs white and black is printed under every step.
03
Export
Pick Tailwind / CSS vars / SCSS / JSON and copy it straight into your code.

Shade generator FAQ

Four questions people actually ask about shade generation.

Why 11 steps?: 50-950 across 11 stops matches the scales used by mainstream design systems (Tailwind, Radix), so swapping in costs nothing.
Will the hue drift?: No. Interpolation runs in OKLCH with your color anchored to its nearest step, so the hue holds from 50 to 950.
Can I use the scale commercially?: Yes. A shade scale is computed numbers with no license attached - what you export is yours.
Why do some steps come out grayish?: High-chroma colors fall out of sRGB at the extremes; the engine compresses chroma there so steps stay vivid instead of going gray or neon.

After you get the result

Keep going from here and put the colors to work.

Standards Match

Enter a RAL, Pantone or NCS code — or any HEX — and match it across all 10 standard systems with CIEDE2000 ΔE.

Contrast Checker

WCAG 2.1 contrast validation between any foreground and background color.

Palette Board

Spacebar to randomize, lock, drag to reorder, share by URL - everything a palette board should do.

AI Palette Studio

Describe a scene or mood in one line — get a five-role palette with rationale.

// tailwind.config.js / @theme module.exports = { theme: { extend: { colors: { brand: { 50: "#faf3fc", 100: "#f3e1f8", 200: "#e9cbf2", 300: "#deb3eb", 400: "#d099e0", 500: "#bd7ad1", 600: "#a85ebe", 700: "#9142a7", 800: "#782a8d", 900: "#5d1570", 950: "#40034f", }, }, }, }, };

How the shade generator works - enter, check, export.

Pull an 11-step design-system scale from one color, perceptually uniform in OKLCH.

Enter

Paste a HEX, or hit "Build scale" on any color page to bring the value in.

Check

Your color snaps to its nearest step; WCAG contrast vs white and black is printed under every step.

Export

Pick Tailwind / CSS vars / SCSS / JSON and copy it straight into your code.

Shade generator FAQ

Four questions people actually ask about shade generation.

Why 11 steps?

50-950 across 11 stops matches the scales used by mainstream design systems (Tailwind, Radix), so swapping in costs nothing.

Will the hue drift?

No. Interpolation runs in OKLCH with your color anchored to its nearest step, so the hue holds from 50 to 950.

Can I use the scale commercially?

Yes. A shade scale is computed numbers with no license attached - what you export is yours.

Why do some steps come out grayish?

High-chroma colors fall out of sRGB at the extremes; the engine compresses chroma there so steps stay vivid instead of going gray or neon.