darken

Function Signature

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

Parameters

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

Return Value

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

darken("#ff6600", 20);
// "#cc5200"

darken("#228b22", 40);
// "#133d13"

Examples

// Darken orange by 10%
console.log(darken("#ff6600", 10));
// "#e65c00"

// Darken light gray
console.log(darken("#cccccc", 30));
// "#8f8f8f"

Implementation Details

• The function internally calls lighten with a negative percentage.
• Ensures the lightness adjustment is always applied in the darkening direction (-Math.abs(percent)).
• Uses HEX → RGB → HSL → RGB → HEX conversion pipeline defined in lighten.

Usage Notes

• Ideal for generating darker shades of a base color in design systems.
• Lightness is clamped between 0% (black) and 100% (white).
• Complements the lighten function for consistent color manipulation.