Color Shades
Generate shades from light to dark for any color
Color Shade Generator
Shades are created by adding white (lightening) or black (darkening) to a base color. This is fundamental for creating depth, hover states, and visual hierarchy in web design.
Tint = base color + white (lighter). Shade = base color + black (darker). Together they create a complete tonal palette from a single color.
Choose Base Color
HSL: 204°, 70%, 53%
Complete Shade Palette (19 steps)
Lighter Tints
Base Color
#3498DB
Darker Shades
Using Shades in CSS
A well-defined shade palette helps create consistent designs. Here's how you might use shades as CSS custom properties:
CSS Custom Properties
:root {
--primary-100: #D6EAF8;
--primary-200: #AED6F1;
--primary-300: #85C1E9;
--primary-400: #5DADE2;
--primary-500: #3498DB;
--primary-600: #2A7AAF;
--primary-700: #1F5B83;
--primary-800: #153D58;
--primary-900: #0A1E2C;
}
.btn-primary {
background: var(--primary-500);
color: white;
}
.btn-primary:hover {
background: var(--primary-600);
}100#D6EAF8
125#AED6F1
150#85C1E9
175#5DADE2
500#3498DB
625#2A7AAF
750#1F5B83
875#153D58
1000#0A1E2C
Design Tip: Most design systems use a 9-step shade scale (100–900). The middle value (500) is the base color, lighter tints go down (100–400), and darker shades go up (600–900).