pantoken / plugins/pantoken/colors/src / 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

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