Shades & Tints Generator

Generate tints, shades, and tones from any base color. Export a Tailwind-style scale.

Base Color

Pick the color to scale.

#667EEA
#5B70D0
#4F62B6
#44549C
#394682
#2D3868
#222A4E
#171C34
#0B0E1A
#000000

Tailwind Scale

50-900 scale built from the base color.

50
100
200
300
400
500
600
700
800
900
  --shades-100: #667eea;
  --shades-200: #5b70d0;
  --shades-300: #4f62b6;
  --shades-400: #44549c;
  --shades-500: #394682;
  --shades-600: #2d3868;
  --shades-700: #222a4e;
  --shades-800: #171c34;
  --shades-900: #0b0e1a;
  --shades-1000: #000000;
colors: {
  brand: {
      50: '#FFFFFF',
      100: '#D9DFFA',
      200: '#B3BFF5',
      300: '#8C9EEF',
      400: '#667EEA',
      500: '#5265BB',
      600: '#3D4C8C',
      700: '#29325E',
      800: '#14192F',
      900: '#000000',
  }
}

Examples

Indigo shades ramp

Input
Base: #667eea
Scale: Shades
Output
#667eea, #5a6cd1, #4e5ab8, #42499f, #363886, #2a276d, #1f1f54, #16173b, #0d0f22, #000000

Ten even steps from #667eea down to pure black — useful for elevation shadows, hover states, and disabled UI.

Tailwind 50–900 scale

Input
Base: #f97316
Output
50: #fff7ed, 100: #fee9d3, 200: #fdd2a7, 300: #fcb27a, 400: #fa8a3c, 500: #f97316, 600: #d65a08, 700: #a14406, 800: #6c2d04, 900: #381702

A complete 10-step design-system scale ready to drop into a Tailwind config under the chosen brand key.

About this tool

The Shades & Tints Generator produces three classic 10-step scales from any base color: shades (mixed toward black), tints (mixed toward white), and tones (mixed toward mid-gray). It is the standard 'lift and darken' ramp every design system needs for hover, border, focus, and disabled states.

Under the hood the generator uses straight sRGB linear interpolation between the base color and the target endpoint (#000, #fff, or #808080). It also emits a Tailwind-style 50–900 scale built from the same base — the light half (50–400) comes from tints, the dark half (600–900) from shades, and the base color sits at 500. The right-hand card shows both the swatch grid and ready-to-paste CSS variables plus a Tailwind config snippet.

How to use

  1. Pick a base color

    Use the Color picker to choose your starting color. The default (#667eea) gives a recognizable indigo ramp.

  2. Choose a scale type

    Switch between Shades (toward black), Tints (toward white) and Tones (toward mid-gray) using the tabs. The ramp updates instantly.

  3. Read the 10-step ramp

    The 10 swatches progress from the base color at index 0 to the endpoint (black, white, or gray) at index 9. Each swatch is copyable.

  4. Copy CSS variables or Tailwind config

    Copy the ready-to-paste CSS custom properties (`--shades-100: ...`) or the Tailwind config snippet with each step keyed under `brand`.

Use cases

Building a design-system color scale

Generate a 50–900 Tailwind-compatible scale for a brand color, then wire it into design tokens for primary buttons, hover states, badges, and disabled variants.

Picking disabled / muted UI colors

Use the tones ramp to derive a muted text or icon color that stays on-hue with the primary color but reads as inactive.

Producing consistent chart palettes

When a chart needs several categorical shades of one color, the shades or tints ramps give you a coherent series without manually picking each step.

Common mistakes

Mistake:Expecting perceptually-even steps.

Fix:This is sRGB linear interpolation, so mid steps may look uneven to the eye. For a perceptually even scale, build it in OKLCH using the Gradient Palette Builder.

Mistake:Confusing shades, tints and tones.

Fix:Shades = mixed with black (darker), Tints = mixed with white (lighter), Tones = mixed with mid-gray (muted). Pick the one that matches the role you are designing for.

Mistake:Using the 500 base for both backgrounds and text.

Fix:The base color (step 5) is usually a saturated brand color — fine for buttons or accents, but too vivid for body backgrounds. Pick from the 50–300 range for surfaces.

Frequently asked questions

References & standards

Related tools

Box Shadow Generator

Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.

Color Blindness Simulator

Simulate color blindness on palettes and images. Compare protanopia, deuteranopia, tritanopia, and more side-by-side.

Color Contrast Checker

Advanced WCAG accessibility compliance checker with color blindness simulation, multiple text sizes, and comprehensive analysis features.

Color Converter

Convert colors between multiple formats (HEX, RGB, HSL, HSV, CMYK, LAB) with color blindness simulation, named colors, and batch processing

Color Extractor

Extract colors from uploaded images by hovering over pixels to get precise color values.

Color Generator

Generate color palettes, analyze colors, and create gradients with this comprehensive color tool.