---
url: /api/plugins/pantoken/colors/src/functions/lighten.md
---
[pantoken-root](../../../../../index.md) / [plugins/pantoken/colors/src](../index.md) / lighten

# Function: lighten()

> **lighten**(`color`, `percent?`): `string`

Beta

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

## Parameters

### color

`string`

The base color.

### percent?

`number` = `10`

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

## Returns

`string`

An `hsl(from …)` relative-color expression.

## Example

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