Color Shades Generator: Build Consistent UI Palettes Fast

Picking a single brand color is easy. Building a full palette — light enough for backgrounds, dark enough for text, with enough steps in between for hover states — is where most developers struggle. A color shades generator automates this work so your palette stays consistent from the start.

Try the Color Shades Generator →

What Are Color Shades?

A color shade scale is a set of related colors derived from a single base hue. Design systems like Tailwind CSS, Material Design, and Radix Colors all use a numbered scale (usually 50–950 or 100–900) that goes from near-white to near-black while preserving the hue identity.

Example — a blue scale:

Step	Hex	Use
50	`#eff6ff`	Page backgrounds
100	`#dbeafe`	Card backgrounds
200	`#bfdbfe`	Borders
400	`#60a5fa`	Hover states
600	`#2563eb`	Primary buttons
800	`#1e40af`	Active states
950	`#172554`	Dark text

The Math Behind Shade Generation

Most generators work in HSL (Hue, Saturation, Lightness) because lightness is a single axis to manipulate:

base color: hsl(217, 91%, 60%)   → blue-500

lighter shades: increase L
darker shades:  decrease L

The hue stays constant. Saturation may be adjusted slightly at the extremes to avoid washed-out light shades or muddy dark ones — this is why hand-tuned palettes look better than raw linear interpolation.

Why not RGB?

RGB doesn’t have a single “lightness” dimension. #ffffff and #0000ff are both at maximum in their channel, but one is visually light and one is dark. Manipulating RGB values to produce shade scales leads to unpredictable results.

Why not HSB/HSV?

HSB’s “brightness” channel behaves differently from perceptual lightness. A fully saturated red at hsb(0, 100%, 100%) is not the same perceptual weight as a fully saturated blue. For perceptually uniform scales, some tools use OKLCH instead of HSL — it’s more accurate but less intuitive.

Generating a Tailwind-Style Palette

Tailwind’s color system uses 11 steps: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. The 500 step is typically close to the base color.

With our generator, input any hex color and get the full 11-step scale as CSS custom properties:

:root {
  --color-brand-50: #f0f9ff;
  --color-brand-100: #e0f2fe;
  --color-brand-200: #bae6fd;
  --color-brand-300: #7dd3fc;
  --color-brand-400: #38bdf8;
  --color-brand-500: #0ea5e9;
  --color-brand-600: #0284c7;
  --color-brand-700: #0369a1;
  --color-brand-800: #075985;
  --color-brand-900: #0c4a6e;
  --color-brand-950: #082f49;
}

You can then use var(--color-brand-500) throughout your stylesheet. This is structurally identical to how Tailwind ships its built-in palette.

Accessibility: Contrast Ratios Matter

A shade scale is only useful if the steps are accessible. WCAG 2.1 requires:

AA normal text: contrast ratio ≥ 4.5:1 against background
AA large text / UI components: contrast ratio ≥ 3:1
AAA: contrast ratio ≥ 7:1

Practical rule: on a white background, use shade 600 or darker for body text. On a black background, use shade 300 or lighter. Always verify with a contrast checker — perceptual uniformity of the scale doesn’t guarantee WCAG compliance.

When to Use Shades vs. Tints vs. Tones

Term	Definition	Example
Shade	Base color + black added	Darker blues
Tint	Base color + white added	Lighter blues
Tone	Base color + gray added	Muted blues

Most UI palettes mix all three. The lightest steps are tints; the darkest are shades; the middle steps often include tones to avoid oversaturation.

Practical Workflow

Pick your brand color (usually a medium-weight step — around 500–600).
Run it through the generator to get a full scale.
Assign semantic names: --color-surface, --color-primary, --color-text.
Check contrast ratios for your key text/background pairings.
Export as CSS custom properties or a Tailwind config object.

Generate your color palette →

Using the Output in Tailwind CSS

If you’re using Tailwind, paste the generated values directly into tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ...
          900: '#0c4a6e',
          950: '#082f49',
        },
      },
    },
  },
}

You’ll then have bg-brand-500, text-brand-700, etc. available across your project.