Color Tint and Shade Table
Build tint and shade ramps from one base colour.
How to use
- 1 Choose a base colour with the picker or paste a hex code.
- 2 Set how many tint and shade steps you want with the slider.
- 3 Review the lighter and darker swatches with their hex codes.
- 4 Copy the generated CSS custom properties for your project.
About Color Tint and Shade Table
The Color Tint and Shade Table turns a single base colour into a full ramp of lighter and darker variants.
Tints are produced by mixing your colour toward white in even steps, and shades by mixing it toward black, giving you a balanced set of values that all share the same hue family.
It is the fastest way to derive hover, active and disabled states, background fills, borders and surface layers from one brand colour without guessing in a design app.
Pick a colour with the swatch picker or type any three- or six-digit hex code, then use the slider to choose how many steps you want in each direction.
Each row shows the resulting hex code over a live preview swatch, with the label text automatically switched to black or white so it stays readable against every background.
The percentages tell you exactly how far each variant has been mixed toward white or black, so the scale is easy to reason about and reproduce.
When you are happy with the ramp, copy the whole set as ready-to-paste CSS custom properties — base, tints and shades — for your stylesheet or design tokens.
Everything is computed locally in your browser, so no colour value is ever uploaded, and the tool keeps working offline once loaded.
FAQ
What is the difference between a tint and a shade?
A tint is your colour mixed with white, making it lighter. A shade is your colour mixed with black, making it darker. This tool builds both ramps at once.
Does it accept shorthand hex codes?
Yes. Three-digit codes like #f00 are expanded automatically, and six-digit codes like #3B82F6 work too, with or without the leading hash.
Are the colours sent anywhere?
No. The entire ramp is calculated in your browser. Nothing is uploaded, logged or stored, and the tool works offline once the page has loaded.