Color Shades, Tints & Tones Generator
Start with a base color and explore darker shades, lighter tints, and muted tones. Adjust the existing step controls and copy the colors you need.
Base Color
Click the swatch to pick a color
Shades
Add black
#316CCD
17%
#2757A4
33%
#1E417B
50%
#142B52
67%
#0A1629
83%
Tones
Add gray
#4782E2
17%
#5281CF
33%
#5E81BB
50%
#6981A7
67%
#758094
83%
Tints
Add white
#5C97F8
17%
#7CACF9
33%
#9DC1FB
50%
#BED5FC
67%
#DEEAFE
83%
Summary
16 total colors including base
How to generate color variations
- Select or enter a base HEX color in the Base Color card.
- Set the shade, tint, and tone counts using the step sliders.
- Compare the generated groups in the strips below.
- Click a swatch to copy its HEX code, or use the JSON or JPEG export action in the header.
Shades, tints, and tones explained
- Shades
- Mix the base color toward black to produce darker versions.
- Tints
- Mix the base color toward white to produce lighter versions.
- Tones
- Mix the base color toward mid-gray (RGB 128,128,128) to produce more muted versions.
The generator interpolates the red, green, and blue channels linearly in sRGB space. This is a simple, predictable method — it does not simulate physical paint mixing and does not produce scales that are perceptually uniform to human vision.
A worked color example
These are rounded sRGB-channel interpolation examples. The tool uses the same channel-interpolation method for every base color.
Using variations in a design
Lighter tints work well as backgrounds, darker shades as accents or borders, and muted tones as supporting colors that recede. Treat these as starting points, not automatically valid UI roles or accessible combinations.
A generated shade sequence is not automatically an accessible design system. Before using a pair for text and its background, verify readability with the Contrast Checker.