Skip to content

Tint and Shade Generator

Make lighter tints and darker shades of a color, with a 50–900 scale of CSS variables.

Tints (mixed with white)

  • 10%
  • 20%
  • 30%
  • 40%
  • 50%
  • 60%
  • 70%
  • 80%
  • 90%

Shades (mixed with black)

  • 10%
  • 20%
  • 30%
  • 40%
  • 50%
  • 60%
  • 70%
  • 80%
  • 90%

CSS variables (50–900)

:root {
  --brand-50: #EBF0FA;
  --brand-100: #D6E0F5;
  --brand-200: #ADC2EB;
  --brand-300: #85A3E0;
  --brand-400: #5C85D6;
  --brand-500: #3366CC;
  --brand-600: #2952A3;
  --brand-700: #1F3D7A;
  --brand-800: #142952;
  --brand-900: #0A1429;
}

Runs in your browser — nothing you enter is sent to a server.

How the Tint and Shade Generator works

Enter a color and get nine tints (mixed with white) and nine shades (mixed with black) in 10% steps. Copy any HEX code, or copy the whole scale as CSS custom properties from 50 (lightest) to 900 (darkest), with your color as 500 — the naming Tailwind CSS uses.

Mixing is done per red, green and blue channel: a tint moves each channel toward 255, a shade toward 0.

Formula

tint = channel + (255 − channel) × amount; shade = channel × (1 − amount)

Examples

#3366CC at 50%

The 50% tint is #99B3E6 and the 50% shade is #1A3366.

The CSS scale

Named "brand", #3366CC gives --brand-50: #EBF0FA (90% white) through --brand-500: #3366CC to --brand-900: #0A1429 (80% black).

Frequently asked questions

Which shades can I use for text?

Check the contrast of each pair in the Color Converter. Body text needs at least 4.5:1 against its background (WCAG AA).

Why do mid tints look slightly grey?

Mixing in sRGB with white or black lowers saturation. For a more vivid scale, raise the saturation of lighter steps by hand.

Can I use named colors like red?

Use HEX, rgb() or hsl(), or pick the color with the picker. Named CSS colors aren't accepted.

Related tools

Color Palette Generator

Build color palettes from a base color with color-wheel harmonies, with HEX, RGB and HSL values.

Generators

Color Converter

Convert colors between HEX, RGB, HSL, HSV and CMYK, and check their contrast against white and black.

Converters

CSS Gradient Generator

Design linear, radial and conic CSS gradients with a live preview and copy the CSS.

Design Tools