Tint & Shade Generator

Generate tints (color → white) and shades (color → black) from any base color. Click any swatch to copy its HEX value.

Color Settings

Color

Steps per side10

520

#FF4E3A

rgb(255, 78, 58)

Tints — Color → White

Shades — Color → Black

Tailwind-Compatible Scale

CSS Custom Properties

:root {
  --color-50: #fff6f5;
  --color-100: #ffeae7;
  --color-200: #ffd3ce;
  --color-300: #ffb8b0;
  --color-400: #ff8c7f;
  --color-500: #ff4e3a;
  --color-600: #cc3e2e;
  --color-700: #992f23;
  --color-800: #661f17;
  --color-900: #40140f;
  --color-950: #210a08;
}