Color scale generator: a 50-950 design-system scale from one color

Enter a brand color and get a full 50 to 950 scale built in OKLCH, the base kept exactly as you gave it, a gray tinted to match, and each step's contrast as text on white and black. Export to Tailwind v4 or v3, CSS custom properties, an SCSS map or W3C design tokens.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated November 10, 2026

Brand color

Token name

Base sits on

Saturation 100%

Hue shift 0°

brand

#FDF3FFW 1.1B 19.4
#F8E0FFW 1.2B 17.1
#EEC9F9W 1.5B 14.4
#DBADE9W 1.9B 11.2
#C38ED3W 2.6B 8.1
#AB71BCW 3.6B 5.8
#9357A4W 5.1B 4.1
#7B3F8CW 7.2B 2.9
#632973W 10.0B 2.1
#4C145AW 13.5B 1.6
#33003FW 17.3B 1.2

W and B are each step's contrast as text on white and on black (green passes 4.5:1, amber passes 3:1 for large text). On a brand-50 background, body text needs brand-600 or darker. Tap a step to copy it; drag it to the tray or into another tool.

Add a matching neutral (gray tinted with your hue)

#FBF4FDW 1.1B 19.5
#EEE7F0W 1.2B 17.3
#DDD5DFW 1.4B 14.7
#C5BDC8W 1.8B 11.5
#AAA2ACW 2.5B 8.5
#908893W 3.4B 6.1
#776F7AW 4.8B 4.3
#615963W 6.7B 3.1
#4B444DW 9.4B 2.2
#363039W 12.8B 1.6
#221C24W 16.7B 1.3

Body text on neutral-50 needs neutral-700 or darker.

DashboardPro

Your scale, at work

Surface neutral-50, text neutral-900, secondary text neutral-700, primary button brand-600, tint panel brand-100.

PrimarySecondaryGhost

Export

Write values as oklch()

@theme {
  --color-brand-50: #fdf3ff;
  --color-brand-100: #f8e0ff;
  --color-brand-200: #eec9f9;
  --color-brand-300: #dbade9;
  --color-brand-400: #c38ed3;
  --color-brand-500: #ab71bc;
  --color-brand-600: #9357a4;
  --color-brand-700: #7b3f8c;
  --color-brand-800: #632973;
  --color-brand-900: #4c145a;
  --color-brand-950: #33003f;
  --color-neutral-50: #fbf4fd;
  --color-neutral-100: #eee7f0;
  --color-neutral-200: #ddd5df;
  --color-neutral-300: #c5bdc8;
  --color-neutral-400: #aaa2ac;
  --color-neutral-500: #908893;
  --color-neutral-600: #776f7a;
  --color-neutral-700: #615963;
  --color-neutral-800: #4b444d;
  --color-neutral-900: #363039;
  --color-neutral-950: #221c24;
}

OKLCH of the base: oklch(47.5% 0.135 318.4). The design-token file follows the W3C Design Tokens Community Group format, which Figma variables plugins and Style Dictionary read.

On this page

A single brand color is not enough to build an interface. Buttons need a darker hover state, alerts need a pale tint behind them, borders need something in between, and text needs a shade dark enough to read. Design systems solve this with a numbered scale: 50 for the palest wash, 950 for the deepest shade, and the brand color sitting somewhere in the middle. This generator builds that scale for you from one color.

How the steps are built

Each step has a target lightness in OKLCH, a color space where equal steps in lightness look like equal steps to the eye. The targets follow the spacing of the default palette in Tailwind CSS version 4, so a scale made here sits comfortably next to Tailwind's own blues and grays. Your color is placed on the step whose target is nearest (or the step you pin it to), and the whole curve bends so it passes through your color exactly: the base is never altered.

Saturation (chroma, in OKLCH terms) peaks at your base and eases off toward the light and dark ends, the way real pigment ramps behave. Where a step would fall outside what a screen can show, chroma is reduced until it fits, rather than clipping a channel and shifting the hue. Two sliders give you control: Saturation scales chroma across the scale, and Hue shift turns the lighter steps warmer or cooler, a trick many hand-tuned palettes use so tints don't look chalky.

The matching neutral

Pure gray next to a strong brand color often looks cold. With the neutral switched on, you get a second eleven-step scale at the same lightness targets, carrying a trace of your hue (chroma under 0.022). It is the gray you would use for page backgrounds, borders and body text.

Reading the contrast labels

Under each step, W is its contrast ratio as text on white and B as text on black, using the WCAG 2.2 formula. Green means 4.5:1 or more, enough for body text at level AA; amber means 3:1, enough for large text and icons. The line under the scale names the lightest step that can carry body text on your 50 background.

Worked example

Start from plum, #7B3F8C. Its lightness puts it on step 700, so 50 becomes #FDF3FF and 950 becomes #33003F. Step 600, #9357A4, measures 5.07:1 on white, the lightest step that passes for body text there; step 500 (#AB71BC) reaches 3.61:1, fine for large headings and icons but not paragraphs. On the 50 background, body text needs step 600 or darker. The matching neutral runs from #FBF4FD to #221C24, and on neutral-50 body text needs neutral-700 (#615963) or darker. Copy the Tailwind v4 tab and you get --color-brand-50 through --color-brand-950 and the neutral set, ready to paste into your stylesheet.

Exports

Tailwind v4: an @theme block of --color-name-step variables.
Tailwind v3: a theme.extend.colors object for tailwind.config.js.
CSS variables and an SCSS map for any other stack.
Design tokens: JSON in the W3C Design Tokens Community Group format, which Style Dictionary and Figma variable plugins import.

Tick Write values as oklch() to export OKLCH instead of hex. You can also save the whole scale to your colors tray, drag single steps into other tools, or open it full screen in studio mode to judge it at size.