DevTools Logo

Shades & Tints Generator

Shades & Tints Generator

Generate tints, shades, and tones from any base color. Export a Tailwind-style scale.

Base Color

Pick the color to scale.

#667EEA
#5B70D0
#4F62B6
#44549C
#394682
#2D3868
#222A4E
#171C34
#0B0E1A
#000000

About this tool

Generate shades, tints, tones, and a Tailwind-style scale from any color. Copy HEX values and reusable CSS variables. Shades & Tints Generator runs in the browser on DevTools. There is no signup, and your input stays on this device unless the tool explicitly performs a live network lookup.

What this tool does not do

  • Shades & Tints Generator is a free in-browser utility, not a hosted API. It does not keep server-side history and is not a substitute for production verification in your own stack.

How do I use this tool?

  1. How do I use Shades & Tints Generator?

    Open Shades & Tints Generator, enter or paste your input, and copy the result. The page works without an account.