About tints and shades
This tool generates a scale of tints and shades from a base color. Tints mix the color toward white and shades mix it toward black, giving you a full light-to-dark range with hex codes — the basis of a UI color scale.
How Color Shades works
How to use it
- Pick a base color or type a hex code.
- Browse the tints and shades.
- Click any swatch to copy its hex.
How it works
Each step blends the base color a fixed amount toward white (tint) or black (shade). The result is an even scale you can use for hover states, backgrounds, borders and text while keeping a consistent hue.
Common uses
- Build a UI color scale
- Generate hover and active states
- Create tints for backgrounds
- Make shades for borders and text
- Design a consistent palette
- Lighten or darken a brand color
- Find accessible variants
- Copy hex shades quickly
Frequently asked questions
What is a tint?
A color mixed toward white (lighter).
What is a shade?
A color mixed toward black (darker).
How do I copy a hex?
Click any swatch to copy its hex code.
Can I enter a hex directly?
Yes — type a hex or use the color picker.
How many steps are there?
Ten tints and ten shades plus the base.
Are my inputs uploaded?
No — it runs in your browser.
Why use tints and shades?
They build a consistent color scale for UI states.
Is it free?
Yes — completely free with no sign-up.