Color Lightener / Darkener

Color lightening and color darkening are techniques that adjust the perceived brightness of a colour while preserving its hue and saturation as much as possible. When you lighten a color, the lightness value increases toward 100% (white), creating a tint. When you darken a color, the lightness decreases toward 0% (black), creating a shade. Our Color Lightener / Darkener performs these adjustments in HSL colour space, which ensures natural-looking results that maintain the character of the original colour.

1. Enter a base color: Type a HEX colour value or use the native colour picker to select any colour. The tool instantly converts it to HSL (Hue, Saturation, Lightness) format, which separates the colour into independent channels for precise manipulation.
2. Adjust the lightness slider: Drag the slider left to darken (negative percentage) or right to lighten (positive percentage). The gradient track shows the full range from darkened to lightened. Click any preset button (-50%, -25%, etc.) for quick jumps. The adjusted colour preview updates in real time alongside the original for comparison.
3. Explore the scale and copy:The 7-step lightness scale below shows how the colour looks at different adjustment levels. Click any step to instantly jump to that level. Use the Copy button next to any format to copy individual values, or copy all formats at once with the “Copy All Values” button.

• Lightening (tints): When you lighten a colour, the lightness value increases proportionally toward 100% (pure white). A +50% adjustment on a colour with 50% lightness will move it 50% of the remaining distance to 100%, resulting in 75% lightness. This creates pastel-like tints that preserve the original hue and saturation.
• Darkening (shades): When you darken a colour, the lightness value decreases proportionally toward 0% (pure black). A -50% adjustment on a colour with 50% lightness will move it 50% of the distance toward 0%, resulting in 25% lightness. This creates deeper shades that retain the original character.
• Hue and saturation preservation: Unlike simple RGB blending (mixing with white or black), HSL-based adjustments keep the hue and saturation values unchanged. This means the colour stays true to its original character while only the brightness changes, resulting in cleaner, more predictable colour variations.
• The -100% to +100% range: The slider spans from -100% (fully darkened to black) through 0% (original colour) to +100% (fully lightened to white). At the extremes, the colour becomes pure black or pure white, but at intermediate values the original hue and saturation remain visible.

Lightening (adjusting lightness in HSL) is different from adjusting brightness (V in HSV/HSB). Lightness in HSL spans from black (0%) through the pure colour (50%) to white (100%), while brightness in HSV spans from black to the pure colour only. This means HSL lightness adjustments produce more natural-looking tints and shades that match how designers think about colour.

Saturation is a separate property that controls colour intensity. When lightening or darkening, saturation stays constant to maintain the colour's vibrancy. If you need to adjust both lightness and saturation together, use our Color Saturator / Desaturator tool. For many design workflows, adjusting lightness alone is sufficient to create the colour variants needed for UI components, hover states, and design system tokens.