v139 ยท CSS

Color Tools via CSS Custom Functions

Author-defined @function rules wrap reusable color operations with typed parameters, default values, local variables, and a declared returns <color> contract. The controls below update CSS variables; the swatches are painted by CSS custom functions.

Feature detection: checking...
Unsupported state: This browser does not fully parse and compute CSS custom functions. The lab keeps the controls visible and reports the fallback instead of treating transparent swatches as a passing result.

contract probes

static palettes

Each swatch uses a real custom function call. The 0% and 100% rows are intentional boundary cases, and defaulted function arguments appear in the edge-case panel below.

Blue - darken and lighten with --ct-darken() / --ct-lighten()
darken 40%
darken 20%
darken 0%
base
lighten 0%
lighten 20%
lighten 40%
Rose - same typed function calls with another token
darken 40%
darken 20%
darken 0%
base
lighten 0%
lighten 20%
lighten 40%
Blue to rose mix with --ct-mix() and a default target color
0%
20%
40%
60%
80%
100%
Emerald alpha fade with --ct-alpha()
1
.8
.6
.4
.2
0

live color tool

Choose design-token colors and drag the numeric controls. JavaScript only updates CSS custom properties; the visible colors come from --ct-lighten(), --ct-darken(), --ct-mix(), and --ct-alpha().

--ct-darken()
base token
--ct-lighten()
--ct-mix()
--ct-alpha()

edge cases

These branches exercise the spec details the previous page skipped: default parameters, 0% boundaries, alpha 0, call-site variables, local variables, and typed-argument rejection.

default parameter + call-site var
0% returns base
alpha 0 is transparent
12px rejected by <color>

computed readout

collecting computed styles...

function source

@function --ct-lighten(--base <color>, --amount <percentage>: 20%) returns <color> {
  result: color-mix(in oklch, var(--base), white var(--amount));
}

@function --ct-mix(
  --a <color>,
  --b <color>: var(--accent-rose),
  --ratio <percentage>: 50%
) returns <color> {
  result: color-mix(in oklch, var(--a) calc(100% - var(--ratio)), var(--b) var(--ratio));
}

@function --ct-brand-tone(--amount <percentage>: 20%) returns <color> {
  --resolved-brand: var(--brand-color);
  result: --ct-lighten(var(--resolved-brand), var(--amount));
}

references