Color Picker & Shades
Pick a color and get tints, shades and tones.
Tints (toward white)
Shades (toward black)
Tones (toward gray)
#7aa2ff
Click any swatch to select it as the new base color.
About the Color Picker & Shades
Pick a base color and instantly generate full tint, shade and tone ramps around it. Handy for building a small design system, picking hover and pressed states for buttons, or finding a lighter variant of a brand color that keeps the same hue.
How to use the Color Picker & Shades
- Pick a color with the native color picker or paste a hex value into the text field.
- Browse the three swatch rows: tints toward white, shades toward black and tones toward gray.
- Click any swatch to make it the new base color and regenerate all ramps.
- Copy a hex value from a swatch label when you need it in CSS or a design tool.
Color Picker & Shades FAQ
What is the difference between tints, shades and tones?
Tints mix the color with white (lighter), shades mix it with black (darker), and tones mix it with neutral gray (less saturated). All three keep the base hue, which is why ramps built this way feel cohesive.
How many steps do the ramps have?
Each ramp has ten steps at 10% intervals, from a 10% mix up to a 90% mix, plus your original base color shown first.
Can I start from a color I already have?
Yes โ paste any hex value into the text field or use the color input. The ramps regenerate immediately from the new base.