Color Shades Generator

What the generator does with your color

The tool converts your color to OKLCH (lightness, chroma, hue in the Oklab space, CSS Color 4 §9.2) and builds 11 steps, 50 to 950, like the Tailwind CSS default palette:

• Lightness follows Tailwind v4’s own ladder for the nearest hue. Tailwind’s yellows are lighter at every step than its blues, so the tool interpolates between the two palettes whose 500 hue surrounds yours. Grays and near-grays use the median ladder of Tailwind’s nine neutral palettes. The ladder is rescaled so it passes exactly through your color.
• Chroma follows the same palette’s curve: low at 50, highest around 400–600, falling toward 950.
• Hue stays the one you entered. Unless you set a hue shift, every step has the same OKLCH hue.
• Out-of-gamut steps keep their lightness and hue and lose chroma until they fit in sRGB (CSS Color 4 §14.1.3).

Your color is never altered: it is copied byte for byte into its step. With Auto, lightness and relative luminance fall at every step from 50 to 950, so a lower number is always lighter.

For #3b82f6 (Tailwind v3 blue-500) the scale is:

The input lands at 500 because Tailwind v4’s blue-500 has the same OKLCH lightness, 62.3%. Exported as a Tailwind v4 theme:

@theme {
  /* base: brand-500 */
  --color-brand-50: #f0f5fe;
  --color-brand-100: #dee9fc;
  --color-brand-200: #c4d9fb;
  --color-brand-300: #9ec2fd;
  --color-brand-400: #69a0fa;
  --color-brand-500: #3b82f6;
  --color-brand-600: #0866ea;
  --color-brand-700: #0056cd;
  --color-brand-800: #0046a9;
  --color-brand-900: #123e85;
  --color-brand-950: #0f2850;
}

Paste it after @import "tailwindcss"; and you get bg-brand-500, text-brand-900 and the rest (Tailwind CSS: Theme variables). For Tailwind v3, choose Tailwind v3 config: it writes a complete tailwind.config.js with the scale under theme.extend.colors. Every export is checked in the test by the real tool that reads it: PostCSS for CSS, Tailwind 4.3.3’s compiler, Dart Sass 1.105 and JSON.parse.

Example: a yellow that should turn amber, not olive

With one hue, dark yellows look olive. Tailwind avoids that by turning its yellow from hue 102 at 50 to 54 at 950. Set Hue shift → At 950 to −35 for #facc15 and the dark end moves toward amber while 50–400 stay unchanged:

Without the shift, 900 is #5d4b0a, an olive brown.

The step number does not guarantee contrast

Tailwind lets lightness vary by hue, and this tool follows it, so the same step reads differently in each hue. White-text contrast in the Auto scales of three colors:

WCAG 2.2 asks for 4.5:1 for body text and 3:1 for large text. Read the figure on the card, or test a specific pair in the Color Contrast Checker. Material Design 3 takes the other route: its HCT “tone” is CIE L*, so a tone difference of 50 guarantees 4.5:1 (material-color-utilities, hct.ts). Radix Colors uses 12 steps, each with a stated job such as backgrounds, borders, solid fills and text (Radix: Understanding the scale).

How it compares with other generators

Measured on 2026-10-01 with #1a73e8:

• uicolors.app put the color at 700 and moved the light steps toward sky blue: the OKLCH hue goes from 258 at 700 to 234 at 300 (400 is #5bc0ff). For #3b82f6 it returned Tailwind’s v3 blue exactly. Tailwind 3, Tailwind 4 and hex exports are free; CSS, SCSS, OKLCH/HSL/RGB values and locking the input to a step need Pro.
• tints.dev put the color at 500 (its default). In its own oklch() export, 50 has hue 276.4 and 500 has 257.9, so the light tints drift toward violet.
• This tool put the color at 600 (closest lightness) and kept every step within 2 degrees of hue 257.9, with all exports free.

Limits

• sRGB only. Steps are clipped to what a standard screen shows; there is no Display P3 output. Tailwind v4’s own palette goes beyond sRGB, so its oklch() values can look more vivid on P3 screens.
• One hue per scale, unless you set a shift at 50 and 950. Shifts run from −180 to 180 degrees and change linearly from your color’s step.
• 11 fixed steps, 50 to 950. No custom step names and no 12-step Radix layout.
• Locking can collapse steps. White locked at 500 makes 100–500 identical; the status line names the collapsed steps.
• Input: hex with 3, 4, 6 or 8 digits, rgb(), hsl() and oklch(). Alpha is ignored. Named colors (blue), lab(), lch() and color() are not read.
• Tailwind v3 and oklch(): with Tailwind CSS 3.4.19, bg-brand-500 works but bg-brand-500/50 is silently not generated for an oklch() value (tested 2026-10-01). Use HEX, RGB or HSL for v3.
• Contrast is WCAG 2.2 against pure white and pure black only. It is not APCA, and it does not test two shades against each other.

Related: convert single values in the Color Converter or build the rest of your tokens in the CSS Variables Generator.