Color
  • Free forever
  • No sign-up
  • Instant results

Tint and Shade Generator

Lighten or darken any hex color by a percentage. Positive values blend toward white for a tint, negative values blend toward black for a shade. Perfect for building out a full color scale.

Result
Positive = tint (lighter) · Negative = shade (darker)

When would you use this?

Building a color palette usually means creating lighter and darker versions of your brand colors, for hover states, disabled states, backgrounds, and accents. This generator lets you enter any hex color and a percentage, then blend it toward white (tint) or black (shade). It's a quick way to extend a single brand color into a full usable scale without opening a design tool.

Common Questions

What's the difference between a tint and a shade?

Is this the same as CSS color-mix()?