Color Table Generator

Generate a full 50–950 color scale from any base color, ready for CSS variables or Tailwind config.

Base Color

rgb(99, 102, 241)

Color Name

Color Scale

CSS Variables

css

:root {
  --color-primary-50: #f1f1fe;
  --color-primary-100: #dedffc;
  --color-primary-200: #b9baf9;
  --color-primary-300: #8587f4;
  --color-primary-400: #4346ef;
  --color-primary-500: #1317dd;
  --color-primary-600: #0b0eb7;
  --color-primary-700: #080b91;
  --color-primary-800: #06086f;
  --color-primary-900: #04064d;
  --color-primary-950: #030430;
}

Tailwind Config

json

"primary": {
  "50": "#f1f1fe",
  "100": "#dedffc",
  "200": "#b9baf9",
  "300": "#8587f4",
  "400": "#4346ef",
  "500": "#1317dd",
  "600": "#0b0eb7",
  "700": "#080b91",
  "800": "#06086f",
  "900": "#04064d",
  "950": "#030430"
}