Resolve contextual CSS colors

Turn a deferred CSS color expression into a concrete color by supplying its missing context explicitly.

Deferred expression

color-mix(in oklab,
currentColor 75%,
var(--accent) 25%)

Explicit context

currentColor: var(--brand)
--brand: #806eae
--accent: #d97706
scheme: light

Concrete result OklabColor #967494

Supply context, then obtain a concrete color

Without currentColor or --accent, non-strict resolution retains a deferred ColorMix expression.

Make every dependency explicit

CssContext supplies the values required by a deferred expression. When every dependency resolves, CssColor::resolve() returns a concrete color.

<?php

use PhpColor\Color\Css\CssColor;
use PhpColor\Color\Css\CssContext;

$context = CssContext::light(
    ['--brand' => '#806eae', '--accent' => '#d97706'],
    'var(--brand)',
);
$expression = CssColor::mix(
    'oklab', CssColor::currentColor(),
    CssColor::var('--accent'), 75, 25,
);

$color = CssColor::resolve($expression, $context);
echo $color->toHex(); // #967494

Use the context your application knows

PHPColor resolves only the variables, scheme, and current color supplied by application code. It does not read browser state.

Resolution can return a concrete ColorInterface or a still-deferred CssResolvableInterface. Check the result type.

PHPColor does not inspect a DOM, cascade, inheritance, selectors, media queries, or computed styles.

Concrete hex output reparses to the same hex, while its floating-point channels remain quantized.

Resolve contextual CSS colors

Supply context, then obtain a concrete color

Make every dependency explicit

Use the context your application knows

Resolve the context your application already owns