How is this different from a color palette generator?

A palette generator (like our color-palette-generator) gives you several *different hues* — complementary, triadic, analogous — for building a color scheme. This tool does the opposite: it keeps a single hue and generates 11 lightness steps (50–950) of that one color. You use a palette generator to pick your brand blue and green; you use this tool to expand each of those into the full token ramp a design system needs (blue-50 through blue-950).

Why not just lighten and darken by a fixed percentage?

Naively adding or subtracting 10% lightness per step looks wrong at the ends: the light tints all collapse into indistinguishable near-whites and the dark shades crash to black after two or three steps. We interpolate lightness with an easing curve so the 50–200 range spreads out enough to be usable as distinct background fills, and the 700–950 range keeps enough separation for text, borders, and pressed states. Saturation is also nudged up slightly toward the dark end, which is how Tailwind and most hand-tuned ramps avoid muddy-looking shades.

How do I actually use 50 through 950 in a project?

Rough convention from the Tailwind/Radix world: 50–100 for page and card backgrounds, 200–300 for subtle borders and hover fills, 400–500 for the primary brand color and icons, 600–700 for buttons and links, 800–900 for body and heading text, 950 for the darkest text or dark-mode surfaces. Check the contrast badge on each step — anything passing AA (≥4.5) against white is safe for normal body text on a white background.

Will the exported Tailwind block drop straight into my config?

Yes. The Tailwind export is a ready-to-paste `colors` object keyed by step number, so you can name it (e.g. `brand`) and reference `bg-brand-500` immediately. The CSS export gives you `--color-50` … `--color-950` custom properties for runtime theming, and the SCSS/JSON exports cover Sass pipelines and token tooling like Style Dictionary.

Does the base color always appear exactly in the scale?

Your base color anchors to the nearest step by lightness, and that step is rendered as the exact base color you entered — so if you feed in your precise brand HEX it is preserved at its natural position in the ramp rather than being shifted. The other ten steps are derived from it.

Build the color tokens for a new design system

You're starting a design system and your designer handed you one brand blue, `#3b82f6`. Tailwind expects an 11-step ramp, not a single value. Paste the HEX here, read the 50–950 scale, switch the export tab to Tailwind, and copy the block straight into `tailwind.config.js` under `colors.brand`. Now `bg-brand-50` through `text-brand-950` all resolve. Repeat for each brand color (success green, danger red) and your token layer is done in five paste-copy cycles instead of hand-tuning 55 hex values.

Generate dark-mode surface and text steps

Dark mode needs the *same* hue but inverted usage: the 900–950 steps become your page surfaces and the 50–200 steps become your text. Paste your brand color, look at the contrast badges on the dark end — pick the 950 step for the deepest panel and verify the light steps (50–200) clear AA contrast *against that dark step*, not against white. The ramp gives you a consistent family so light and dark themes feel like the same brand rather than two unrelated palettes.

Fill in the missing steps of an inherited palette

You inherited a stylesheet with only `--blue-500` and `--blue-700` defined, and three components keep inventing their own in-between blues by eye. Paste the 500 value, read off the generated 600 and the 300/400 the codebase is missing, and copy those exact HEX values into the stylesheet. Now every component pulls from the same ramp instead of `#5a93f0`-ish guesses that drift from the brand.

Pick a readable text shade for a colored background

You have a colored callout box and need text on it that passes WCAG AA. Paste the box's background color, then scan down the ramp's contrast-vs-white and contrast-vs-black columns. The first dark step (often 800 or 900) that shows ≥4.5 against your background's lightness is your safe text color — copy it directly. No more shipping a `text-blue-400` that fails contrast on a `bg-blue-100` card.

Hand a developer a complete, named color ramp

Instead of pasting a single HEX into Slack and saying "make it a bit lighter for hover," generate the full ramp, copy the shareable URL (the base color rides in the query string), and send that. The developer opens the same scale you saw, exports to whatever format their stack uses (CSS vars for a runtime theme, JSON for Style Dictionary), and there's zero ambiguity about what "lighter" meant — it's step 400 vs step 500.

Color Shades Generator — 50–950 Tints & Shades from One Base Color

Turn one base color into a Tailwind-style 50–950 tint & shade scale — copy each step, export to Tailwind / CSS / SCSS / JSON — browser-only

Runs locally
Category Color & Design
Best for Moving from a visual idea to reusable color values.

Base color

HEX

Token name

Scale (50–950)

#f1f6fevs white 1.1 Fail · vs black 19.4 AAA

100

#e3edfdvs white 1.2 Fail · vs black 17.8 AAA

200

#bbd4fcvs white 1.5 Fail · vs black 13.9 AAA

300

#8fb8favs white 2.0 Fail · vs black 10.4 AAA

400

#5996f7vs white 2.9 Fail · vs black 7.1 AAA

500 · base

#3b82f6vs white 3.7 AA Large · vs black 5.7 AA

600

#0b5ce0vs white 5.8 AA · vs black 3.6 AA Large

700

#094cb9vs white 7.6 AAA · vs black 2.7 Fail

800

#073c92vs white 10.1 AAA · vs black 2.1 Fail

900

#042e72vs white 12.8 AAA · vs black 1.6 Fail

950

#011e4bvs white 16.3 AAA · vs black 1.3 Fail

Export as

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          '50': '#f1f6fe',
          '100': '#e3edfd',
          '200': '#bbd4fc',
          '300': '#8fb8fa',
          '400': '#5996f7',
          '500': '#3b82f6',
          '600': '#0b5ce0',
          '700': '#094cb9',
          '800': '#073c92',
          '900': '#042e72',
          '950': '#011e4b',
        },
      },
    },
  },
};

What this tool does

Paste a single base color and get a full 11-step lightness scale (50, 100, 200 … 900, 950) in the exact shape Tailwind, Radix, and most design-system token files expect. Unlike a palette generator that gives you several *different hues* for a color scheme, this tool stays on one hue and walks the lightness axis: near-white tints at the top (50–200) for backgrounds and hover fills, your base color snapped to its nearest step in the middle, and deep shades (800–950) at the bottom for text and borders. Every step shows its HEX plus the WCAG 2.2 contrast ratio against both white and black, so you can see at a glance which steps are safe for body text and which are decorative only. The base color anchors to the closest 50–950 step (so a mid-tone like #3b82f6 lands on 500) and the rest of the ramp is interpolated in HSL lightness with a perceptual easing curve that keeps the light end from blowing out and the dark end from crushing to black too fast. One click copies a single step; one click exports the whole ramp as a Tailwind `colors` block, CSS custom properties, SCSS variables, or JSON. 100% client-side — your brand colors never leave the browser tab.

Tool details

Input: Text + Numbers; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 9 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Color & Design · Designer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How Color Shades Generator fits into your work

Use it while choosing, checking, converting, or documenting colors for real interface work.

Color jobs

Moving from a visual idea to reusable color values.
Checking contrast and accessibility before a UI ships.
Keeping brand, design, and implementation color decisions aligned.

Color checks

Verify contrast against the actual background, not just a sample swatch.
Check dark and light themes separately when both exist.
Copy the final format your design system or codebase expects.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Build the color tokens for a new design system
You're starting a design system and your designer handed you one brand blue, `#3b82f6`. Tailwind expects an 11-step ramp, not a single value. Paste the HEX here, read the 50–950 scale, switch the export tab to Tailwind, and copy the block straight into `tailwind.config.js` under `colors.brand`. Now `bg-brand-50` through `text-brand-950` all resolve. Repeat for each brand color (success green, danger red) and your token layer is done in five paste-copy cycles instead of hand-tuning 55 hex values.
Generate dark-mode surface and text steps
Dark mode needs the *same* hue but inverted usage: the 900–950 steps become your page surfaces and the 50–200 steps become your text. Paste your brand color, look at the contrast badges on the dark end — pick the 950 step for the deepest panel and verify the light steps (50–200) clear AA contrast *against that dark step*, not against white. The ramp gives you a consistent family so light and dark themes feel like the same brand rather than two unrelated palettes.
Fill in the missing steps of an inherited palette
You inherited a stylesheet with only `--blue-500` and `--blue-700` defined, and three components keep inventing their own in-between blues by eye. Paste the 500 value, read off the generated 600 and the 300/400 the codebase is missing, and copy those exact HEX values into the stylesheet. Now every component pulls from the same ramp instead of `#5a93f0`-ish guesses that drift from the brand.
Pick a readable text shade for a colored background
You have a colored callout box and need text on it that passes WCAG AA. Paste the box's background color, then scan down the ramp's contrast-vs-white and contrast-vs-black columns. The first dark step (often 800 or 900) that shows ≥4.5 against your background's lightness is your safe text color — copy it directly. No more shipping a `text-blue-400` that fails contrast on a `bg-blue-100` card.
Hand a developer a complete, named color ramp
Instead of pasting a single HEX into Slack and saying "make it a bit lighter for hover," generate the full ramp, copy the shareable URL (the base color rides in the query string), and send that. The developer opens the same scale you saw, exports to whatever format their stack uses (CSS vars for a runtime theme, JSON for Style Dictionary), and there's zero ambiguity about what "lighter" meant — it's step 400 vs step 500.

Common pitfalls

Treating the 50 step as "almost the base color." It's not — 50 is the lightest near-white tint, meant for page backgrounds, while 500 is the mid-tone closest to most brand colors. If your brand color looks nothing like the 50 step, that's expected; check the step your base anchored to (usually 400–600).
Using a light step like 300 or 400 for body text on white. Those steps almost never pass WCAG AA contrast (≥4.5) against white — they're for fills and borders. Read the contrast-vs-white badge and reach for 700–900 when you need readable text.
Pasting a fully saturated, very light, or very dark base and expecting a balanced 11-step ramp. If your base is already near white (e.g.

Privacy

Every step of the scale is computed by plain JavaScript HSL math running in your browser tab — the base color, the 11 derived steps, the WCAG contrast ratios, and all four export formats never touch a server, and there is no logging of which colors you generated. The one caveat: the base color is encoded in the shareable URL query string (`?c=3b82f6`), so if you paste a "share link" with an unreleased brand color into Slack or email, the destination server's access log will record that HEX. For an embargoed brand color, copy the export text manually instead of sharing the URL.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role

Color Shades Generator — 50–950 Tints & Shades from One Base Color

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How Color Shades Generator fits into your work

Color jobs

Color checks

Good next steps

Real-world use cases

Build the color tokens for a new design system

Generate dark-mode surface and text steps

Fill in the missing steps of an inherited palette

Pick a readable text shade for a colored background

Hand a developer a complete, named color ramp

Common pitfalls

Privacy

FAQ

Color Converter

CSS Text Gradient Generator

Color Mixer

CSS Gradient Generator

WCAG Color Contrast Fixer

Color Contrast Checker

CSS Border Radius Generator

CSS Box Shadow Generator

CSS Clip-Path Generator

Color Blindness Simulator

Color Temperature to RGB

Complementary Color Calculator