About Color Lighten / Darken

Shift a color's lightness by +/- N%, preserving hue & saturation. Part of the DevTools Surf developer suite. Browse more tools in the Color collection.

Use Cases

• Frontend developers creating hover and focus state color variants
• Designers generating consistent light/dark mode color adjustments
• Brand teams producing accessible contrast pairs from a single base color
• CSS developers replacing SASS lighten/darken with pre-computed hex values

Tips

• Shift lightness by a precise percentage while keeping hue and saturation intact
• Use positive values to lighten and negative values to darken
• Generate hover and pressed states by lightening or darkening a base color

Fun Facts

• SASS's lighten() and darken() functions operate in HSL space, which can produce unexpected saturation shifts — working in CIELAB avoids this perceptual inconsistency.
• The human eye is more sensitive to lightness changes than to hue changes — a 10% lightness shift is far more noticeable than a 10-degree hue rotation.
• The Web Content Accessibility Guidelines (WCAG 2.1) require a minimum 4.5:1 contrast ratio, which typically means at least a 40% lightness difference between text and background.

FAQ

Does it preserve hue and saturation?

Yes — the tool operates in HSL space so only lightness changes. HEX/RGB math directly would shift hue. HSL-based lightening is what designers expect.

Why does pure black/white look wrong when lightened?

Pure black (L=0) has no hue; lightening adds lightness but still no hue. Add saturation first if you want the lightened version to have color.

What percentage should I use?

Subtle shifts: 5-15% per step. Dramatic: 25-40%. For a stepped palette (primary, primary-light, primary-lighter), 10-15% steps feel natural.

Is this the same as color-mix() in CSS?

Similar effect; color-mix() with white/black operates in OKLCH or LCH, which is perceptually uniform. HSL is the traditional approach and matches legacy tooling.