Export palettes and gradients

Export palette values and serialize gradients for CSS.

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.