Tints and Shades Generator
Pick a starting color and instantly get 10 lighter variations toward white (tints) and 10 darker ones toward black (shades). Click any swatch to copy its hex code.
☀️ Tints — toward white
🌑 Shades — toward black
Why tints and shades matter in a design system
A single color is never enough to build an interface — you need its variations. Tints (the color mixed with white) work well for backgrounds, badges, hover states and soft surfaces; shades (the color mixed with black) are ideal for text, borders, icons and active states that need solid contrast. It's the same idea behind the 50–900 numbered scales in Tailwind CSS and Material Design: with one consistent scale you stop inventing random grays and off-tones on every screen.
How the variations are calculated
Each step blends your starting color with white or black in increasing amounts: the first swatch contains roughly 9% white (or black), the last one about 91%. The mixing happens on the RGB channels — the most common method in designer tools — so you get an even, predictable scale with hex codes ready to paste into your CSS, into Figma, or into your design system variables.