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.
Darkening Without Muddying
Reducing HSL lightness moves a colour toward black, and pure black is a poor
destination — it flattens hue and makes dark shades look muddy.
Mix toward a very dark version of the hue rather than #000000: mixing toward
hsl(hue, 30%, 10%) keeps the colour recognisable.
- Watch the hue shift. Darkening yellow in sRGB drifts it toward green; oklch avoids
this.`css
--brand-700: color-mix(in oklab, var(--brand) 70%, black);
--brand-900: color-mix(in oklab, var(--brand) 40%, black);
`
Darker colours gain contrast against white, so darkening is usually the right move when a
brand colour fails an accessibility check on a light background.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.