Choose export from the consumer backward. Use arrays when another PHP process owns the schema, CSS custom properties for named tokens, and gradient CSS when the browser should render the final geometry.
| Consumer | Export | Boundary |
|---|---|---|
| PHP or structured application data | toHex() or toCss() arrays |
Preserve palette keys |
| CSS token block | toCssVariables() |
Named palette only; declarations only |
| Browser gradient | Gradient toCss() |
Serialized stops and geometry |
Export arrays and CSS custom properties
toHex() and toCss() return arrays with the palette's keys:
use PhpColor\Color\Palette\ColorPalette;
$palette = ColorPalette::fromHex([
'primary' => '#3b82f6',
'success' => '#10b981',
]);
$hex = $palette->toHex();
$css = $palette->to('oklch')->toCss();
echo $hex['primary'];
echo $css['success'];
use PhpColor\Color\Palette\ColorPalette;
$palette = ColorPalette::fromHex([
'primary' => '#3b82f6',
'success' => '#10b981',
]);
$hex = $palette->toHex();
$css = $palette->to('oklch')->toCss();
echo $hex['primary'];
echo $css['success'];
For CSS custom properties, use a named palette:
use PhpColor\Color\Palette\ColorPalette;
$tokens = ColorPalette::fromHex([
'primary' => '#3b82f6',
'surface' => '#ffffff',
]);
echo $tokens->toCssVariables('theme');
use PhpColor\Color\Palette\ColorPalette;
$tokens = ColorPalette::fromHex([
'primary' => '#3b82f6',
'surface' => '#ffffff',
]);
echo $tokens->toCssVariables('theme');
The output contains:
--theme-primary: #3b82f6;
--theme-surface: #ffffff;
--theme-primary: #3b82f6;
--theme-surface: #ffffff;
toCssVariables() always serializes values as hexadecimal sRGB and does not add a selector or braces. It rejects scale palettes. Treat palette keys and the prefix as trusted token identifiers; the method does not sanitize them.
Serialize a gradient as CSS
Every gradient exposes toCss():
use PhpColor\Color\Gradient\Gradient;
$gradient = Gradient::linear(90.0, '#ff0000', '#0000ff');
$css = $gradient->toCss();
$wideGamutCss = $gradient->toCss('display-p3');
use PhpColor\Color\Gradient\Gradient;
$gradient = Gradient::linear(90.0, '#ff0000', '#0000ff');
$css = $gradient->toCss();
$wideGamutCss = $gradient->toCss('display-p3');
The optional color-space argument changes how each stop color is formatted. It does not change the gradient’s interpolation space. See Converting and formatting colors for the distinction between color conversion and serialization.
Stops are sorted by position in CSS output, even though getStops() returns the stored order. Empty gradient objects can also be serialized, but their output is not a useful visual gradient; build gradients with at least two stops for production CSS.
Verify the delivered representation
Palette variable export always reduces values to hexadecimal sRGB. Gradient formatting can retain another selected space for stop colors, but does not add a CSS interpolation-space clause. Neither method adds selectors, fallback declarations, or application-specific token validation.
Continue with Export a palette as CSS variables, Format CSS colors, or ColorPalette.