Loading tool…
ToolWrenGenerate a full range of shades, tints and tones from any base color — perfect for building a color palette.
Loading tool…
Shades & Tints is a free, private online tool that lets you generate shades, tints and tones from any base color, each with a copyable HEX code. It runs entirely in your browser, so nothing you enter is uploaded to a server.
Privacy: this tool runs entirely in your browser. Your input is never sent to, received by, or stored on any server — there are no uploads and no tracking of what you enter.
A tint mixes a color with white (lighter), a shade mixes it with black (darker), and a tone mixes it with grey (muted). Together they give you a cohesive palette from one starting color.
Pick a base color and the tool generates eight tints, eight shades and eight tones, each as a swatch with a HEX code.
Use tints and shades for hover states, backgrounds and borders that stay on-brand with your primary color.
From any single base color you can derive a whole family of related colors. A tint is the color mixed with white (lighter), a shade is mixed with black (darker), and a tone is mixed with grey (more muted). Together they give you a coordinated range that all share the same underlying hue - the foundation of a cohesive palette.
The tool takes your base color and blends it incrementally toward white, black and grey to produce a graded series of each. Because every variation keeps the original hue and only changes lightness or saturation, the results automatically harmonise - which is exactly what you want for a design system where colors must feel like a set.
Real interfaces need more than a single brand color. You need a lighter tint for backgrounds and hover states, darker shades for borders, text and pressed states, and muted tones for secondary elements. Generating these from one base ensures visual consistency and saves you guessing HEX values by hand - the same approach behind professional color systems like those in Tailwind or Material Design.
Having a graded scale also helps with contrast and accessibility: you can pick a dark enough shade for text on a light tint, or a light enough tint for text on a dark shade, to meet WCAG contrast requirements. Pair this tool with the Contrast Checker to confirm a given pair is readable.
Choose a base color with the picker or by typing a HEX code, and the tool generates a row of tints, a row of shades and a row of tones, each as a copyable swatch. Click any swatch to copy its HEX. Everything runs in your browser.