Color Shades Generator
Generate a complete color scale from a single base color
Color scale
Click a color to copy it
Advertisement
Banner adResponsive
Color Shades Generator – Tailwind & CSS Scales
Generate an 11-step 50–950 color scale from a base color. Copy CSS variables, Tailwind config, or JSON, with WCAG contrast checks.
0 shades
Related tools
What is Color Shades Generator?
Generate an 11-step color scale from 50 through 950, with the selected base color at 500. Includes WCAG contrast ratio checks and export as CSS variables, Tailwind config, or JSON. Copy colors as HEX, RGB, or HSL.
- color shades
- color scale
- tailwind colors
- css variables
- color palette
Features
What you get with Color Shades Generator.
11-Step Scale
50 through 950 with the selected base color at 500.
WCAG Contrast Check
AA/AAA accessibility compliance status for each shade.
3 Export Formats
CSS variables, Tailwind config, or JSON.
Live Preview
See the full scale update in real time as you pick a color.
Advertisement
In-feed adResponsive
Frequently asked questions
Common questions about Color Shades Generator.
11 shades — 50, 100, 200, 300, 400, 500 (base), 600, 700, 800, 900, and 950.
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–950). 500 is the base color.
Advertisement
Mobile banner adResponsive
Comments
Share feedback, ask questions, or help others use this tool.
Join the discussion
Sign in to comment, reply, and report inappropriate content.