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).
How to Use Color Shades?
- 1Choose a base color using the interactive picker or enter HEX, RGB, HSL values.
- 2Generate matching color palettes, schemes, or color space transformations instantly.
- 3Click on any color code block in the results to copy it instantly to your clipboard.
Designer Friendly
Easily match colors, check contrast ratios, and generate custom palettes for your designs.
Multi-Format Support
Supports copy-paste in HEX, RGB, RGBA, HSL, HSLA, and CSS variables formats.
Runs Locally
No internet connection required. Our color engines run instantly and cleanly inside your web browser.