---
url: /api/plugins/pantoken/colors/src/functions/darken.md
---
[pantoken-root](../../../../../index.md) / [plugins/pantoken/colors/src](../index.md) / 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

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