buncha/design/color-shades

Color Shades Generator

TintsMixed toward white

ShadesMixed toward black

TonesMixed toward neutral grey

:root {
  --tint-50: #fcf2eb;
  --tint-100: #f8e5d7;
  --tint-200: #f1cbae;
  --tint-300: #ebb086;
  --tint-400: #e4965d;
  --tint-500: #dd7c35;
  --tint-600: #b1632a;
  --tint-700: #854a20;
  --tint-800: #583215;
  --tint-900: #2c190b;
  --shade-50: #dd7c35;
  --shade-100: #d07532;
  --shade-200: #b6662c;
  --shade-300: #9c5825;
  --shade-400: #82491f;
  --shade-500: #683a19;
  --shade-600: #4e2c13;
  --shade-700: #341d0c;
  --shade-800: #1a0f06;
  --shade-900: #000000;
  --tone-50: #918780;
  --tone-100: #998677;
  --tone-200: #aa8367;
  --tone-300: #bb8156;
  --tone-400: #cc7e46;
  --tone-500: #dd7c35;
  --tone-600: #cc7e46;
  --tone-700: #bb8156;
  --tone-800: #aa8367;
  --tone-900: #998677;
}

Pairs well with

ASCII Art Generator

Image to text-art. Multiple character ramps, squar…

Barcode Generator

Generate Code 128, EAN-13 or UPC-A barcodes. Encod…

Border Radius Generator

Generate CSS border-radius with a visual editor.

Box Shadow Generator

Create and preview CSS box shadows visually.

About Color Shades Generator

Build a 10-step palette around any base colour. Tints (mixed toward white), shades (toward black) and tones (toward neutral grey), labelled 50–900 to match design-token conventions. Click any swatch to copy, or grab the whole palette as CSS variables.

Everything happens on your device. Close the tab and it's gone.