Tints and Shades Generator
Enter any hex code to get lighter tints and darker shades you can copy instantly, or start from a theme below. New to the theory? Read a full guide to tints and shades, browse the color library (with the full Tailwind palette), or convert values with our hex to RGB converter.
More tools: tint & shade generator · tint generator · shade generator · lighten a color · darken a color · color wheel · contrast checker · RGB to hex · tint percentage chart
What a tint and a shade actually are
A tint is your color mixed with white; a shade is your color mixed with black. In hex terms that is a single formula per direction. Tinting moves every channel toward FF — new = old + (255 − old) × factor. Shading moves every channel toward 00 — new = old × (1 − factor). Because both operations apply the same factor to all three channels, the hue survives: a tint of your brand blue is still your brand blue, just lighter. That is what makes a generated ramp usable as a design system instead of a pile of unrelated colors. A tint is not a shade, and neither is a tone, which mixes in gray instead.
What the hue, chroma, and lightness modes do
The three modes on the scale generator each hold two properties fixed and sweep the third:
- Lightness keeps hue and saturation fixed and walks from near-white to near-black. This is the tint-and-shade ramp, and the mode you want perhaps nine times out of ten — it is where button, hover, border, and surface colors come from.
- Chroma keeps hue and lightness fixed and varies saturation, producing the muted tones of one color. Useful for disabled states and for backgrounds that should carry a hint of the brand without shouting it.
- Hue keeps saturation and lightness fixed and rotates around the color wheel. This is how you find a matching accent at the same visual weight — and the color wheel does the same rotation by named harmony rules.
A worked example with one hex
Take #2D6A4F, a dark spruce green — rgb(45, 106, 79). Lighten it 20% and each channel moves a fifth of the way to 255: red becomes 45 + (255 − 45) × 0.2 = 87, green becomes 136, blue becomes 114, giving #578872. Darken the original 20% instead and each channel is multiplied by 0.8: 36, 85, 63 — #24553F. Run the same hex through the generator above and you get thirty-one of those steps at once, every one click-to-copy. See it precomputed on the #2D6A4F library page.
Where to go next
Grab a color off your screen with the color picker, find the colors that go with it on the color wheel, then check any text-and-background pairing in the contrast checker before you ship — a harmonious palette is not automatically a readable one. For colors that are already worked out, the color library has 280+ pages including every step of the Tailwind CSS palette, each with tints, shades, RGB and HSL values, and WCAG contrast data.