Pick a base colour and see how it shifts when you add white (tints), black (shades) or grey (tones) — with copyable hex codes for every swatch.
How to use: Pick any colour with the picker or click a preset swatch.
The three strips show Tints (+ white), Shades (+ black) and Tones (+ grey).
The 2D Tone Map below shows the full light-to-dark value space in one grid.
Click any swatch to copy its hex code.
Tints+ White
Shades+ Black
Tones+ Grey
Tone MapFull Value Space
Left → right: tint (adding white) · Top → bottom: shade (adding black) · Click any cell to copy hex