Advertisement
Color Shades Generator – Tailwind & CSS Color Scales
NewGenerate a full 50–900 color scale from any base color. Export as CSS variables, Tailwind config, SCSS, or JSON with WCAG contrast checks.
Color Shades Generator
Generate tints & shades from any base color
Base color
Click any shade row to copy in HEX format. Switch format using the toggle above.
What is Color Shades Generator?
Generate 11-stop color scales (50–900) following Material Design and Tailwind conventions. Includes WCAG contrast ratio checks and multi-format export: CSS variables, Tailwind config, SCSS, and JSON.
Color Shades Generator Features
11-Stop Scale
50 through 900 following Tailwind/Material conventions.
WCAG Contrast Check
AA/AAA accessibility compliance status for each shade.
4 Export Formats
CSS variables, Tailwind config, SCSS, or JSON design tokens.
Live Preview
See the full scale update in real time as you pick a color.
Advertisement
Color Shades Generator FAQ
11 shades — 50, 100, 200, 300, 400, 500 (base), 600, 700, 800, 900 — matching the Tailwind CSS and Material Design numbering systems.
Each shade displays its contrast ratio against white and black backgrounds, indicating whether it passes WCAG AA (4.5:1) or AAA (7:1) for body text.
Copy the exported object and paste it into the 'colors' section of your tailwind.config.js (or tailwind.config.ts) under 'extend'. Your custom color scale is then available as Tailwind utility classes.
Tints are lighter variants created by mixing with white (lower numbers like 50–400). Shades are darker variants created by mixing with black (600–900). 500 is typically the base color.