Color Shades & Tints Generator
Generate a 50–950 shade scale from one colour.
Design systems need a full scale of each colour, not just one swatch.
About Color Shades & Tints Generator
Turn one brand colour into a full 11-step scale from 50 to 950, like the Tailwind palettes. Copy the result as a HEX list, CSS custom properties or a Tailwind config block and drop it straight into your design system.
Design systems need a full scale of each colour, not just one swatch. This tool turns a single base colour into 11 steps from 50 to 950 — lighter tints toward white and darker shades toward black — ready to copy as HEX, CSS variables or a Tailwind config.
How to use Color Shades & Tints Generator
- Pick your base colour; it becomes shade 500.
- Choose an output format: HEX list, CSS variables or Tailwind config.
- Copy the scale into your project.
Key features
- 11-step 50–950 scale, like Tailwind's palettes.
- Output as HEX, CSS custom properties or a Tailwind config.
- Visual swatches with readable labels.
Common use cases
- Creating brand colour scales for a design system.
- Generating hover, active and background shades of one colour.
- Extending a Tailwind theme with a custom colour.
Frequently asked questions
Related tools
Color Picker
Click any pixel in an image to get its exact color code.
CSS Gradient Generator
Create linear, radial and conic CSS gradients visually.
Color Converter
Convert colours between HEX, RGB, HSL, HSV, CMYK and OKLCH.
Color Contrast Checker
Check WCAG contrast ratio between text and background colours.