Shades & Tints Generator
Generate 10-step shade and tint ramps from any base color.
Pick a base color and instantly get a 10-step shade ramp (mixed toward black) and a 10-step tint ramp (mixed toward white). Useful for building Tailwind-style color scales, design tokens or hover/active states.
Common use cases
- Build a custom 10-step color scale for design tokens
- Pick darker hover and pressed states from a base brand color
- Generate background tints from an accent color for cards and chips
- Create a print-ready shade ladder for backgrounds and borders
Frequently asked questions
How are shades and tints computed?▾
Each step linearly mixes the base RGB toward pure black (shades) or pure white (tints) at fixed 10% intervals.
Is this the same as Tailwind's 50–950 scale?▾
Similar idea but Tailwind tunes saturation and lightness perceptually for each family — straight tinting is a fast starting point you may want to adjust.
Can I export to CSS variables?▾
Click any swatch to copy its hex; paste into your token file as needed.
Related tools
🎨
Color Picker (HEX/RGB/HSL)
Pick a color and copy it as HEX, RGB, HSL or HSV.
🌈
CSS Gradient Generator
Build linear and radial CSS gradients with live preview.
🎨
Color Palette Generator
Generate harmonious color schemes from a base color.
👁
WCAG Contrast Checker
Check color contrast ratios against WCAG AA/AAA accessibility levels.