Advertisement
Color Shades Generator – Create Tailwind Scales
NewGenerate complete color scales with tints and shades from any base color instantly. Export to CSS, Tailwind, SCSS, or JSON with accessibility checks.
Color Shades Generator
Generate Tailwind-style color scales from any base color
What is Color Shades Generator?
Generate 11 shades (50-900) from a single base color following Material Design and Tailwind conventions. Features accessibility checking (WCAG contrast ratios), export to multiple formats (CSS variables, Tailwind config, SCSS, JSON), and real-time preview. Perfect for design systems and UI libraries.
colorshadestintspalettetailwindcss
Color Shades Generator Features
11-Shade Scale
Complete scale from 50 (lightest) to 900 (darkest)
Multiple Export Formats
CSS, Tailwind, SCSS, JSON – project-ready
Accessibility Checker
WCAG contrast ratios for each shade
Real-Time Preview
See shades with hex, RGB, HSL values
Color Shades Generator FAQ
11 shades (50-900) following Material Design and Tailwind standards: 50, 100, 200, 300, 400, 500 (base), 600, 700, 800, 900.
Yes. Export as CSS variables (--color-50), Tailwind config (theme.extend.colors), SCSS variables ($color-50), or JSON.
Yes. Shows WCAG contrast ratios for each shade against white/black, indicating AA/AAA compliance for text readability.