Color Shades & Tints
Enter a hex color and generate a palette of progressively darker shades and lighter tints. Free and private, right in your browser.
Shades (darker)
Tints (lighter)
Pick a base color and instantly see it stretched into a full range of lighter tints and darker shades, handy for building a hover/active state, a border or background variant, or a whole 50-900 style color scale without eyeballing hex values.
How to use it
- Enter or pick your base color (hex or color picker)
- Scan the generated row of lighter tints and darker shades
- Click any swatch to copy its hex code
Frequently asked questions
- What's the difference between a shade and a tint?
- A shade mixes your color with black to make it darker; a tint mixes it with white to make it lighter. This tool generates both directions from your base color so you get a full light-to-dark range, not just one.
- Can I get a scale like Tailwind's 50-900 color steps?
- Yes. Pick a base color and the tool generates a graduated ramp from near-white to near-black around it, which you can map to 50/100/200...900-style tokens for your design system.
- What format are the output colors in?
- Each shade and tint is shown as a hex code you can click to copy, so you can paste it straight into CSS, a Tailwind config, or a design tool.
- 1
Nothing is uploaded
The file never leaves your device. There is no server to send it to, so there is nothing to leak, log, or subpoena.
- 2
No signup, no limits
No account, no email, no daily cap, no watermark, and no paid tier waiting behind the third file.
- 3
Works offline
Load the page once and it keeps working with the network off, because all the work was always happening locally.