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

# Function: overlayColors()

> **overlayColors**(`base`, `overlay`, `percent?`): `string`

Beta

Flatten `overlay` (at `percent`% strength) over an opaque `base` — a CSS-only stand-in for
ui-color-utils `overlayColors`. That helper source-over-composites two RGBA colors into one opaque
result; the common case (a translucent tint over a solid surface) is exactly a two-color
`color-mix()`. General RGBA-over-RGBA compositing can't be a single CSS color, so this covers the
opaque-base case only.

## Parameters

### base

`string`

The opaque background color.

### overlay

`string`

The color laid over it.

### percent?

`number` = `50`

How much of `overlay` shows through, 0–100 (default `50`).

## Returns

`string`

A `color-mix()` expression.

## Example

```ts
overlayColors("var(--surface)", "var(--brand)", 12);
// "color-mix(in srgb, var(--brand) 12%, var(--surface))"
```