lighten

Function Signature

lighten(hex: string, percent: number): string

Parameters

• hex (string): A HEX color string (e.g., #ff6600).
• percent (number): The amount to increase lightness, from 0 to 100. Negative values darken instead.

Return Value

Returns a HEX color string with adjusted lightness, always in the format #rrggbb.

lighten("#ff6600", 20);
// "#ffaa66"

lighten("#228b22", 30);
// "#80e680"

// Negative values darken
lighten("#00aaff", -20);
// "#007fcc"

Examples

// Lighten orange by 10%
console.log(lighten("#ff6600", 10));
// "#ff8533"

// Lighten dark gray
console.log(lighten("#333333", 40));
// "#999999"

Implementation Details

• Converts the HEX input to RGB values using hexToRgb.
• Transforms RGB into HSL using rgbToHsl.
• Adjusts the lightness (l) by the given percentage and clamps it with clampPct.
• Converts back to RGB using hslToRgb, then to HEX with rgbToHex.

Usage Notes

• Positive values brighten the color, negative values darken.
• Lightness is clamped between 0% (black) and 100% (white).
• Pairs with darken for consistent color adjustments.