Skip to main content
Back to all tools

Color Table Generator

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

rgb(99, 102, 241)
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"
}

Frequently Asked Questions

What is a color table and how is it used in design systems?

A color table generates a full range of tints and shades from a single base color, typically numbered from 50 (lightest) to 950 (darkest). Design systems like Tailwind CSS, Material Design, and Ant Design use these scales so that every component can reference a consistent palette without hardcoded values.

How many shades should a color scale have?

Most design systems use 10-11 steps (50, 100, 200…900, 950). This provides enough granularity for backgrounds, borders, hover states, and text. Tip: if you need fewer steps, pick every other value (100, 300, 500, 700, 900) for a compact 5-shade scale.

How do I export these colors for Tailwind CSS?

Use the Tailwind Config export option which outputs a JavaScript object you can paste directly into your tailwind.config.ts under theme.extend.colors. The CSS Variables export is useful if you prefer referencing colors via var(--color-500) in your stylesheets.

Why do some shades look washed out or overly saturated?

When generating tints (lighter shades), saturation naturally decreases. When generating shades (darker), colors may shift hue. Tip: for the most vibrant scales, start with a mid-tone base color (L ≈ 45-55%) and moderate saturation (S ≈ 60-80%). Extremely light or dark base colors leave less room for variation.

Can I use different base colors for each shade?

Typically no — a color scale should derive from a single hue for consistency. However, you can adjust the hue slightly across the scale (hue rotation) to add warmth to lighter shades or coolness to darker ones. This technique is used by Tailwind's default palette for more natural-looking scales.