Color & CSS
Color Shades & Tints Generator
The Color Shades & Tints Generator takes a single base color and produces a ten-step lightness scale, from a very light tint down to a very dark shade.
It's a quick way to build a consistent color palette for a design system, without manually picking each shade -- calculated instantly in your browser.
How to Use the Color Shades & Tints Generator
- Open the Color Shades & Tints Generator.
- Pick a base color using the color picker.
- The scale of tints and shades updates instantly.
- Use the hex codes shown under each swatch in your project.
Frequently Asked Questions
How is the scale calculated?
The base color's hue and saturation are kept constant while its lightness (in HSL) is stepped from 95% down to 5%, producing an even tint-to-shade scale.
Can I copy the hex codes?
Yes, each swatch shows its hex code, which you can select and copy directly.
Is anything uploaded when I use this tool?
No. The palette is generated entirely in your browser -- nothing is sent to a server.
Advertisement
Sponsored