Tints & Shades Generator

Create monochromatic color scales for UI states, borders, and backgrounds.

Base Color

#3B82F6

Steps (10)

Copy

#FFFFFF

Copy

#EFF2FF

Copy

#DFE4FE

Copy

#CFD7FE

Copy

#BECBFD

Copy

#ACBEFC

Copy

#9AB2FB

Copy

#87A5FA

Copy

#7299F9

Copy

#5A8EF7

Copy

#3B82F6

Copy

#3874DA

Copy

#3567C0

Copy

#3159A5

Copy

#2D4D8C

Copy

#284073

Copy

#23345C

Copy

#1D2845

Copy

#171D2F

Copy

#10121B

Copy

#000000

Why use a Tint & Shade Generator?

Consistent color systems rely on mathematically related variations of a base color. This tool helps you generate these variations instantly, ensuring your hover states, active states, and borders look harmonious.

Tints: Base color mixed with white. Great for backgrounds and highlights.
Shades: Base color mixed with black. Perfect for text, borders, and shadows.