Color Shades and Tints Generator
100% PrivateColor & Design ToolsBuild a full scale of shades and tints around any base color.
Runs entirely in your browser. Your input is not uploaded to Ovatly or anywhere else.
- 1Enter the base color as a HEX value or with the swatch.
- 2Choose how many steps you want on each side.
- 3Copy individual steps, or the whole scale at once.
- 4Use darker steps for text and lighter steps for surfaces.
For #2563EB with 4 steps per side, the scale runs from the darkest shade #07142F (80% black), through #0F285E, #163B8D and #1E4FBC, then the base #2563EB itself, then the tints #5182EF, #7CA1F3, #A8C1F7 and the lightest tint #D3E0FB (80% white).
- Mixing is a straight line in RGB space, which is simple and predictable; perceptual scales (like OKLCH ramps) curve differently and can keep mid-tones more vivid.
- Percentages describe the mix amount: a 20% shade is 80% base color and 20% black.
- Equal percentage steps do not look equally spaced to the eye, because human vision is more sensitive in dark tones.
A shade mixes in black, a tint mixes in white, and a tone mixes in gray. This tool builds shades and tints; mixing the base with its own gray version gives tones.
About this tool
The Shades and Tints Generator builds a scale around a base color: shades mix it toward black, tints mix it toward white, in even percentage steps. Designers use the scale for hover states, borders, backgrounds and text variants that stay unmistakably in the same color family.
Related tools
Part of Ovatly's free tools in Color & Design Tools.