pantoken / plugins/pantoken/colors/src / darken

Function: darken()

darken(color, percent?): string

Beta

Darken by percent HSL-lightness points — the CSS-only mirror of ui-color-utils darken (tinycolor lowers HSL lightness). Uses relative color syntax so hue and saturation are preserved.

In relative hsl(), the l channel resolves to a <number> on the 0–100 scale — the same scale tinycolor's amount uses — so the points are subtracted directly (no %).

Parameters

color

string

The base color.

percent?

number = 10

Lightness points to subtract (default 10, matching tinycolor's default).

Returns

string

An hsl(from …) relative-color expression.

Example

darken("var(--brand)", 10); // "hsl(from var(--brand) h s calc(l - 10))"