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
| Percentage | HEX | Use Case |
|---|---|---|
| Original | #3B82F6 | Primary button |
| -10% | #2563EB | Hover state |
| -20% | #1D4ED8 | Active/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.