Build and sample color gradients

Use one gradient definition to generate exact samples and a CSS representation.

Browser CSS

linear-gradient(90deg in oklab, rgb(124 58 237) 0%, rgb(236 72 153) 50%, rgb(245 158 11) 100%)

0
#7c3aed

0.25
#b24dc5

0.5
#ec4899

0.75
#f1796f

1
#f59e0b

PHP Oklab samples

Sample in PHP and serialize for CSS

The PHP samples follow the gradient object's Oklab interpolation setting. The CSS serializer preserves that interpolation space alongside the angle and stops.

Build the gradient once

Set its geometry, interpolation space, and stops in one object. That object can produce both discrete colors and a CSS representation.

<?php

use PhpColor\Color\Gradient\GradientBuilder;

$gradient = GradientBuilder::linear(90)
    ->in('oklab')
    ->from('#7c3aed')
    ->via('#ec4899')
    ->to('#f59e0b')
    ->build();

foreach ([0, 0.25, 0.5, 0.75, 1] as $position) {
    echo $position.' '.$gradient->interpolate($position)->toHex().PHP_EOL;
}

echo $gradient->toCss().PHP_EOL;

Read exact colors along the path

interpolate() returns a color at any position. Values outside the stop range clamp to the nearest endpoint.

0 #7c3aed
0.25 #b24dc5
0.5 #ec4899
0.75 #f1796f
1 #f59e0b
linear-gradient(90deg in oklab, rgb(124 58 237) 0%, rgb(236 72 153) 50%, rgb(245 158 11) 100%)

Carry the interpolation space into CSS

PHP's samples and the browser-rendered gradient share one definition, including the selected color space.

CSS preserves the interpolation clause

The serializer emits the angle, selected color space, and sorted stops in one valid CSS gradient.

Positions need application validation

The builder does not validate arbitrary CSS position strings passed to at().