Tints & Shades
Color Tints
And Shades
Generate beautiful tint and shade variations of any color. Pick a base color and instantly see lighter and darker versions.
21
Colors
Free
Open Source
Base Color
Pick or enter a color to generate variations
Tints
Base: #3B82F6 Shades
Tints
(Lighter variations)Shades
(Darker variations)All Color Values
Click any row to copy • 21 colors total
| Color | HEX | RGB | HSL | Type |
|---|---|---|---|---|
| #EDF4FE | rgb(237, 244, 254) | hsl(215, 89%, 96%) | Tint 91% | |
| #DBE8FD | rgb(219, 232, 253) | hsl(217, 89%, 93%) | Tint 82% | |
| #CADDFD | rgb(202, 221, 253) | hsl(218, 93%, 89%) | Tint 73% | |
| #B8D2FC | rgb(184, 210, 252) | hsl(217, 92%, 85%) | Tint 64% | |
| #A6C6FB | rgb(166, 198, 251) | hsl(217, 91%, 82%) | Tint 55% | |
| #94BBFA | rgb(148, 187, 250) | hsl(217, 91%, 78%) | Tint 45% | |
| #82AFF9 | rgb(130, 175, 249) | hsl(217, 91%, 74%) | Tint 36% | |
| #70A4F8 | rgb(112, 164, 248) | hsl(217, 91%, 71%) | Tint 27% | |
| #5F99F8 | rgb(95, 153, 248) | hsl(217, 92%, 67%) | Tint 18% | |
| #4D8DF7 | rgb(77, 141, 247) | hsl(217, 91%, 64%) | Tint 9% | |
| #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) | Base | |
| #3676E0 | rgb(54, 118, 224) | hsl(217, 73%, 55%) | Shade 9% | |
| #306AC9 | rgb(48, 106, 201) | hsl(217, 61%, 49%) | Shade 18% | |
| #2B5FB3 | rgb(43, 95, 179) | hsl(217, 61%, 44%) | Shade 27% | |
| #26539D | rgb(38, 83, 157) | hsl(217, 61%, 38%) | Shade 36% | |
| #204786 | rgb(32, 71, 134) | hsl(217, 61%, 33%) | Shade 45% | |
| #1B3B70 | rgb(27, 59, 112) | hsl(217, 61%, 27%) | Shade 55% | |
| #152F59 | rgb(21, 47, 89) | hsl(217, 62%, 22%) | Shade 64% | |
| #102343 | rgb(16, 35, 67) | hsl(218, 61%, 16%) | Shade 73% | |
| #0B182D | rgb(11, 24, 45) | hsl(217, 61%, 11%) | Shade 82% | |
| #050C16 | rgb(5, 12, 22) | hsl(215, 63%, 5%) | Shade 91% |
Tints &
Shades
Tints are created by mixing a color with white, making it lighter. Shades are created by mixing a color with black, making it darker. This tool generates smooth variations for your design projects.
Tints (Lighter) Shades (Darker) HEX/RGB/HSL Tailwind CSS