loot.tools

Color Shades & Tints Generator

Pick a base color and get a scale of tints (steps toward white) and shades (steps toward black). It's the quickest way to turn one brand color into a usable palette - hover and active states, borders, backgrounds, or a full 50-to-900 style scale. Choose how many steps you want on each side, switch the output between HEX, RGB, and HSL, and click any swatch to copy it. Everything runs in your browser.
Design

Pick a base color and get a full range of tints (mixed toward white) and shades (mixed toward black). Handy for building UI palettes, hover and active states, or a light-to-dark scale from one brand color. Click any swatch to copy it. Runs entirely in your browser.

Tint 83%#deeafe
Tint 67%#bed5fc
Tint 50%#9dc1fb
Tint 33%#7cacf9
Tint 17%#5c97f8
Base#3b82f6
Shade 17%#316ccd
Shade 33%#2757a4
Shade 50%#1e417b
Shade 67%#142b52
Shade 83%#0a1629
Copy all 11 values

Tints vs shades

A tint is your color mixed with white, so it gets lighter and softer. A shade is your color mixed with black, so it gets darker and deeper. Together they give you a single-hue scale that runs from very light to very dark, with your original color sitting in the middle. It's the same idea behind the numbered color scales in design systems like Tailwind or Material.

How the steps work

Each step is mixed an even amount toward white or black, spread between your base color and pure white or pure black. Ask for 5 steps and you get 5 tints above the base and 5 shades below it. More steps means finer gradations. The base color always stays exactly as you entered it.

When this helps

  • Building hover, active, and disabled states from one button color
  • Generating a full color scale from a single brand color
  • Picking a lighter background tint and a darker border from the same hue
  • Creating a monochromatic palette that's guaranteed to harmonize
  • Copying the whole scale at once into your CSS variables or design tokens