Color & Design

Color Shades & Tints

Turn one color into a complete scale of tints and shades — the foundation of any design system palette.

Color & design

Shades and tints scale

Local only

Base colorOr type a valueSteps

:root {
  --brand-50: #dae4fc;
  --brand-100: #c5d6fa;
  --brand-200: #9db9f6;
  --brand-300: #759cf2;
  --brand-400: #4d80ef;
  --brand-500: #2563eb;
  --brand-600: #1f52c3;
  --brand-700: #18419b;
  --brand-800: #123173;
  --brand-900: #0c204b;
}

Local and instant

The scale is calculated in your browser by mixing your color towards white and black.

Tints, shades and tones

A tint mixes a color with white, a shade mixes it with black, and a tone mixes it with grey. The 50–900 numbering follows the convention used by most modern design systems, with your base color anchored at 500.

Using the scale

50–200 for page and card backgrounds.
300–400 for borders and subtle fills.
500–600 for primary buttons and links.
700–900 for hover states and text on light backgrounds.

Good to know

Frequently asked questions

Why is my base color at 500?

It is the convention in design systems: 500 is the anchor, with lighter values below and darker above.

Are these the same as a colour ramp from a design tool?

They are built the same way, by mixing towards white and black. Some tools also shift hue slightly; this one keeps the hue faithful to your base.

Can I get more than ten steps?

Ten covers almost every interface need. If you want more, generate two scales from slightly different bases.

Will every step be readable?

No. Always check text pairs with the contrast checker — usually 600 and darker work on white.

Shades and tints scale

Tints, shades and tones

Using the scale

Frequently asked questions

Related tools

Color Converter

Color Picker

HEX to RGB Converter