Lighten Color Tool
Make any color lighter by increasing its lightness value. Create tints and lighter variations for hover states, backgrounds, and subtle accents.
How Lightening Works
Colors are lightened by increasing the L (lightness) value in HSL:
| Original | +10% | +20% | +30% |
|---|---|---|---|
| hsl(220, 80%, 50%) | hsl(220, 80%, 60%) | hsl(220, 80%, 70%) | hsl(220, 80%, 80%) |
Example: Lightening Blue
| Percentage | HEX | Visual |
|---|---|---|
| Original | #2563EB | Base blue |
| +10% | #4B7FEE | Lighter |
| +20% | #729CF1 | Even lighter |
| +30% | #99B9F4 | Light pastel |
Use Cases
- Hover states: Lighten on mouse-over
- Backgrounds: Subtle tinted backgrounds
- Disabled states: Lighter = inactive
- Gradients: Create light-to-dark transitions
CSS lighten() Function
``css
/* Using Sass/SCSS */
$primary: #2563EB;
$primary-light: lighten($primary, 20%);
/* Using CSS color-mix() */
.light {
background: color-mix(in srgb, #2563EB, white 30%);
}
`
Lighten colors for tints, hover states, and subtle variations.
Lightening Without Washing Out
Raising lightness in HSL is the standard approach, and it has a known failure: as
lightness climbs, perceived saturation drops, so a "lighter blue" reads as a "greyer blue".
Two corrections:
Add saturation as you add lightness. +20% lightness usually wants +5–10% saturation
to hold its character.
- Mix toward white instead, which preserves more of the hue's identity than an HSL
lightness bump does.`css
/* Mixing keeps the hue; HSL lightness alone drifts */
--brand-100: color-mix(in oklab, var(--brand) 20%, white);
--brand-300: color-mix(in oklab, var(--brand) 50%, white);
`
Note that a lighter colour is a *worse* contrast against white. Check the ratio after
lightening, not before.
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.