Generator
Color Shades Generator — 50 to 950 Scale
- Generate
- Mobile Friendly
- Accessibility Tested
- SEO Optimized
- Fast Loading
- Responsive
Version 1.0.0 · Last reviewed
How it worksShow guide
Introduction
Turn a single brand color into a complete shade scale with tints and shades — perfect for design tokens and component libraries.
Step-by-step
- Enter or pick a base color
- Review the generated 50–950 scale
- Copy individual shades or the full CSS variable block
Worked example
Base #2563eb generates shades from 50 (#eff6ff) through 950 (#172554) for a complete blue palette.
Use cases
- Build Tailwind-style color scales for design systems
- Generate hover and active state variants from one brand color
- Export CSS variables for light and dark themes
Frequently asked questions
How is the 500 shade chosen?
The 500 step uses your base color's lightness. Lighter tints (50–400) and darker shades (600–950) are derived from it.
Related tools
-
Color Palette Generator
Generate harmonious color schemes — complementary, triadic, analogous, split-complementary, tetradic, and monochromatic.
-
Color Picker
Pick colors with sliders, eyedropper, and saved swatches — copy HEX, RGB, HSL, and CSS values instantly.
-
CSS Gradient Generator
Build linear, radial, and conic CSS gradients with live preview, custom stops, and one-click copy.
-
Color Contrast Checker
Check WCAG 2 contrast ratios between foreground and background hex colors.
Popular tools
Was this helpful?
Your feedback stays on this device only — it is not sent to the Bestrao team yet.