Resolve CSS color mixes

Keep a weighted CSS expression deferred, then resolve it when its operands become available.

Expression color-mix(in oklab, var(--brand) 60%, var(--accent) 40%)
--brand
#806eae
--accent
#d97706
Resolved #a37683 OklabColor

Keep the expression and its resolved value distinct

PHPColor can emit the weighted CSS expression or resolve its operands to one exact color. A missing operand keeps the complete mix deferred.

Resolve named operands when context arrives

The two values are CSS operand weights. PHPColor normalizes them by their sum before resolving the mix in the selected space.

<?php

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

$context = CssContext::light([
    '--brand' => '#806eae',
    '--accent' => '#d97706',
]);

$expression = CssColor::mix(
    'oklab',
    CssColor::var('--brand'),
    CssColor::var('--accent'),
    60,
    40,
);

echo $expression->toCss();
echo CssColor::resolve($expression, $context)->toHex();
// #a37683
use PhpColor\Color\Css\CssColor; use PhpColor\Color\Css\CssContext; $context = CssContext::light([ '--brand' => '#806eae', '--accent' => '#d97706', ]); $expression = CssColor::mix( 'oklab', CssColor::var('--brand'), CssColor::var('--accent'), 60, 40, ); echo $expression->toCss(); echo CssColor::resolve($expression, $context)->toHex(); // #a37683

CSS weights are not one mix ratio

Immediate Color::mix() accepts one interpolation ratio. This deferred API accepts two CSS weights and resolves only one resulting color.

Two PHP interpolation spaces

PHP resolution supports oklab and srgb. A non-positive total weight throws, while individual negative weights are not fully validated.

No expression round trip

CssColor::parse() cannot reparse the serialized color-mix() expression in v1.

Resolve another expression

Supply the operands and inspect the exact mixed color