paletta

Tailwind Shade Scale Generator

Enter a base color, get a full 50-to-950 shade scale. Part of AI color system tool.

Quick answer: A shade scale is a set of lightness variations derived from a single base color. In Tailwind CSS, scales run from 50 (lightest) through 500 (base) to 950 (darkest).

Method
colors: {
  'color': {
      '50': '#e7f6ff',
      '100': '#c5e0ff',
      '200': '#a0c9ff',
      '300': '#7bb2ff',
      '400': '#5a9aff',
      '500': '#3b82f6',
      '600': '#2164cf',
      '700': '#0b48a4',
      '800': '#002f76',
      '900': '#00174c',
      '950': '#000325',
  }
}

How it works

  1. Enter your base color

    This becomes the 500 step in your scale.

  2. Review the generated scale

    11 shades from near-white (50) to near-black (950).

  3. Copy the output

    Choose Tailwind config, CSS variables, or JSON.

What is a shade scale?

A shade scale is a set of lightness variations derived from a single base color. In Tailwind CSS, scales run from 50 (lightest) through 500 (base) to 950 (darkest), with each step serving a specific role: 50 for backgrounds, 100-200 for hover states, 500 for primary actions, 700-900 for text.

Building perceptually uniform scales by hand is tedious. Equal numeric steps in HSL do not produce equal visual steps. OKLCH, a perceptually uniform color space, solves this: equal delta-L values yield visually equal lightness jumps.

A shade scale generator automates this: input one color, output a complete 11-step scale with even perceptual spacing. The result is ready for Tailwind configuration, CSS custom properties, or design token JSON.

Use the hex to RGB converter to normalize the source color first, then walk the scale through the WCAG contrast checker to confirm every step pairs with text. For full multi-color systems and synced surface tokens, Pro shade scales and exports.

Common use cases

  • Build a Tailwind theme

    Generate 50 to 950 from a brand color and export a drop-in tailwind.config.ts snippet.

  • Standardize a design system

    Replace ad-hoc hex with a perceptually even scale your engineers can extend. Sanity-check the result with the color blindness simulator.

  • Fix muddy mid-tones

    Move from sRGB to OKLCH and watch the 400 to 600 range stop turning gray.

  • Export tokens cross-platform

    Export CSS, JSON, and Tailwind from one source so web and native stay in sync.

FAQ

Frequently asked questions

OKLCH spaces shades evenly in perceived lightness, so the visual gap between 100 and 200 looks the same as the gap between 700 and 800. HSL spaces shades by mathematical lightness, which tends to bunch up the mid-tones and crush the darks. OKLCH is the better default for production design systems.

Use the Tailwind export to copy a config object keyed by 50 through 950, then merge it under colors in your tailwind.config.js. Reference it as bg-brand-500, text-brand-700, and so on. Existing utilities like hover and dark mode work without extra setup.

The 50 to 950 scale matches the convention used by Tailwind, Material, and Radix. Eleven steps give enough range to cover surfaces, borders, body text, and emphasis without forcing designers to choose between too-similar values. Most teams use four to six of the steps in any given product.

Not yet. The curve anchors on your color: it sits at 500, and the lighter and darker steps space evenly in lightness toward near-white at 50 and near-black at 950. Every step shows its contrast on white and on black.

Related tools

One color, one scale.

Paletta generates coordinated scales for every color in your palette, with accessibility validation on every step.