Darken Color Tool
Make any color darker by decreasing its lightness value. Create shades and darker variations for text, borders, and pressed states.
How Darkening Works
Colors are darkened by decreasing the L (lightness) value in HSL:
| Original | -10% | -20% | -30% | hsl(220, 80%, 50%)hsl(220, 80%, 40%)hsl(220, 80%, 30%)hsl(220, 80%, 20%)
Example: Darkening Blue
PercentageHEXUse Case Original#3B82F6Primary button -10%#2563EBHover state -20%#1D4ED8Active/pressed | -30% | #1E40AF | Very dark |
Use Cases
- Pressed states: Darken on click
- Borders: Darker than fill
- Text: Dark readable text
- Shadows: Darker for depth
CSS darken() Function
``css
/* Using Sass/SCSS */
$primary: #3B82F6;
$primary-dark: darken($primary, 15%);
/* Using CSS color-mix() */
.dark {
background: color-mix(in srgb, #3B82F6, black 20%);
}
``
Darken colors for shades, pressed states, and better contrast.