Palette Tools·free · no signup

Tint & Shade Generator

Generate 10 tints and 10 shades from any color, plus a ready-to-paste Tailwind 50–950 scale. Click any swatch to copy.

Base color
#
Tints
· mixed toward white
Shades
· mixed toward black
Tailwind scale
50 → 950
tokens.css
:root {
  --color-50: #F3F0FF;
  --color-100: #E2DBFF;
  --color-200: #C2B3FF;
  --color-300: #9980FF;
  --color-400: #6C47FF;
  --color-500: #3F0FFF;
  --color-600: #2E00E6;
  --color-700: #2600BD;
  --color-800: #1D008F;
  --color-900: #140066;
  --color-950: #0C003D;
}

How to use the Tint & Shade Generator

A tint is your color mixed toward white and a shade is it mixed toward black, so the tool keeps the hue constant and steps the lightness up and down to build the scale. The result is a balanced ramp where the middle step is your original color and the ends are its lightest and darkest usable versions.

  1. 1
    Enter your base color

    Pick a color or paste a HEX value — this becomes the anchor of the scale.

  2. 2
    Review the ramp

    See 10 lighter tints and 10 darker shades arranged as a 50-to-900 style scale.

  3. 3
    Copy a step

    Click any swatch to copy its HEX, or copy the whole scale for your design tokens.

Frequently asked

What is the difference between a tint, a shade and a tone?
A tint is a color mixed with white (lighter), a shade is mixed with black (darker), and a tone is mixed with gray (less saturated). This tool generates tints and shades.
How is this like a Tailwind color scale?
Tailwind names lightness steps 50 (lightest) through 900 (darkest). The generated ramp follows the same idea, giving you a drop-in scale for a custom brand color.
Will the hue stay the same across the scale?
Yes — the hue is held steady while lightness changes, so every step reads as the same color, just lighter or darker.
Which step should I use for text versus backgrounds?
Use the light tints (50–200) for backgrounds and the dark shades (700–900) for text, then check the pair in a contrast checker for at least 4.5:1.

More palette tools

Palette Generator
Generate beautiful, screenshot-worthy 5-color palettes from any base color — lock, export and share.
Color Harmonies
See complementary, analogous, triadic and tetradic harmonies for any color.
Random Palette
Discover beautiful random color combinations with one click.