Color Shades Generator

Turn any base color into a full 50-950 tint and shade scale - perceptually balanced with OKLCH, and ready to export as CSS custom properties, a Tailwind config, Tailwind v4 @theme tokens, or an SCSS map.

Base color

Token name

Generated scale:

Click any swatch to copy its HEX value. The highlighted step is the closest match to your input color.

Export as:

:root {
  --color-brand-50: #F0F6FF;
  --color-brand-100: #DEEBFF;
  --color-brand-200: #C4DBFF;
  --color-brand-300: #9CC2FF;
  --color-brand-400: #639EFF;
  --color-brand-500: #3B82F6;
  --color-brand-600: #226ADB;
  --color-brand-700: #0251C1;
  --color-brand-800: #003F9B;
  --color-brand-900: #003079;
  --color-brand-950: #001C4F;
}

Related Developer Tools

Color Picker OKLCH Color Picker Tailwind Color Converter Contrast Checker

Last updated: Jun 10 2026

Reviewed by the QuickTooly Team

Color Shades Generator Guide

Why Use a Perceptual Color Shades Generator?

Most "tints and shades" tools simply mix your color with white or black in RGB or HSL. That's quick, but it often produces washed-out light tones or muddy, desaturated dark tones - especially for saturated brand colors. This generator instead works in OKLCH, a perceptually uniform color space, adjusting only lightness while preserving the hue and chroma of your original color (clamped back into the visible sRGB gamut where needed). The result is a scale that feels like one cohesive family of colors, not a faded gradient toward gray.

11-step scale: Generates the familiar Tailwind CSS 50-950 range from a single base color.
Perceptually even: Uses OKLCH lightness steps so each shade feels evenly spaced to the human eye.
Anchor highlighting: The step closest to your input color is highlighted, so you know exactly where your brand color sits in the scale.
Four export formats: CSS custom properties, Tailwind v3 config, Tailwind v4 @theme (OKLCH), and an SCSS map.
100% client-side: Your colors never leave your browser. No tracking, no server uploads.

Who Uses a Color Shade Generator?

Whether you call it a color palette generator, a shade calculator, or a tints-and-shades tool, the goal is the same: turning one color into a usable, cohesive range. This makes it useful well beyond developers writing Tailwind config:

UI and product designers building a design system who need a consistent 11-step ramp for every brand color.
Frontend developers theming a Tailwind project who want bg-brand-100 through bg-brand-900 without manually picking each hex value.
Brand and marketing teams extending a single brand color into a full palette for slides, websites, and marketing materials.
Designers building dark mode who need lighter and darker variants of the same hue that still feel like one color family.
Data visualization designers who need a perceptually even sequential color ramp for charts, heatmaps, and dashboards.

How the Scale Is Generated

Your input color is converted to OKLCH (lightness, chroma, hue). For each of the eleven steps - 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 - the lightness is replaced with a fixed target value modeled on Tailwind's own palette progression, while chroma and hue are kept as close to your original color as the sRGB gamut allows. The step whose target lightness is closest to your input becomes the "anchor" and is highlighted in the preview - that's the step your exact color maps to most closely.

Color Scale Reference: What Each Step Is For

The table below shows the target OKLCH lightness for each of the 11 steps and how each one is typically used in a Tailwind-style design system.

Step	Target Lightness	Typical Use
50	97.1%	Page backgrounds, subtle fills
100	93.6%	Hover backgrounds, subtle borders
200	88.5%	Borders and dividers
300	80.8%	Disabled states, placeholders
400	70.4%	Muted text, icons
500	62.3%	Primary brand color, buttons
600	54.6%	Hover/active states for primary actions
700	47.0%	Pressed states, headings
800	39.8%	Dark mode surfaces, high-emphasis text
900	33.2%	Body text on light backgrounds
950	24.6%	Near-black text, dark mode backgrounds

Using the Exports

CSS custom properties: Drop the :root block straight into your stylesheet and reference shades with var(--color-brand-500).
Tailwind v3 config: Paste the object into theme.extend.colors in tailwind.config.js to get utilities like bg-brand-500.
Tailwind v4 @theme: Paste the OKLCH tokens into your CSS @theme block - Tailwind v4's native color format. Pair this with the Tailwind Color Converter to check how individual shades map to existing Tailwind colors.
SCSS map: Use the map.get() function to pull individual shades in Sass-based projects.

Frequently Asked Questions

How is the 500 shade chosen?

It isn't fixed to 500 - the generator picks whichever step (50 through 950) has a target lightness closest to your input color's actual lightness, and marks that as the anchor. For a mid-tone color this is often 500 or 600, but a very light or dark input may anchor at 100 or 900 instead.

Why OKLCH instead of mixing with white or black?

Mixing in RGB or HSL changes hue and saturation in ways that don't match how we perceive brightness, often producing pale, gray-tinged tints or muddy shades. OKLCH separates lightness from hue and chroma, so adjusting lightness alone keeps the color feeling like the same hue throughout the scale.

Will every shade exactly match my brand color?

The anchor step preserves your color's hue and chroma at its own lightness. Other steps share the same hue and chroma target but may be slightly reduced in chroma at the very light or dark ends, since highly saturated colors can't exist at near-white or near-black lightness within the sRGB gamut.

Can I use this with Tailwind CSS v4?

Yes. Select the "Tailwind v4 @theme" export to get OKLCH color tokens formatted for Tailwind v4's CSS-first @theme configuration.

What does the "Token name" field do?

It sets the variable/key prefix used in every export - for example, entering "brand" produces --color-brand-500 or brand: { 500: '#...' }. Use whatever naming convention your design system already follows.

Is my color data sent to a server?

No. All color conversion and scale generation happens locally in your browser using the open-source culori library. Nothing is transmitted to any server.