Use this recipe when an opaque design token must also provide a translucent overlay for a component. It produces a second CSS value with a changed alpha channel while leaving the source object unchanged.
The fixture uses a concrete OKLCH color. Verify the rendered overlay against its real background because transparency alone does not establish contrast or appearance.
Derive the overlay value
Parse the source token and use withAlpha() to create a separate color object.
use PhpColor\Color\Color;
$source = Color::parse('oklch(0.65 0.18 264)');
$overlay = $source->withAlpha(0.4);
assert($overlay !== $source);
assert($overlay::class === $source::class);
assert($overlay->getChannels() === $source->getChannels());
assert($source->getAlpha() === 1.0);
assert($overlay->getAlpha() === 0.4);
Serialize the CSS token
Format the derived value, then reparse the exact representation that the stylesheet will receive.
Continue with the $source and $overlay variables from the first step:
$css = $overlay->toCss();
$restored = Color::parse($css);
assert($restored::class === $overlay::class);
assert($restored->getChannels() === $overlay->getChannels());
assert($restored->getAlpha() === $overlay->getAlpha());
assert($source->toCss() === 'oklch(0.65 0.18 264)');
echo '--overlay: '.$css.';'.PHP_EOL;
Verify the source and result
The fixture emits the translucent token while the final assertion confirms that the source remains opaque:
--overlay: oklch(0.65 0.18 264 / 0.4);
Change only the alpha argument when the overlay must retain the same tested coordinates. Use a contrast workflow when the foreground or background relationship must meet a named threshold.