Build named color palettes

Keep application color names attached to typed values while you transform and export the complete palette.

Source primary
#5a86ce
accent
#d8944d
surface
#dde5f2
Darkened primary
#436eb4
accent
#be7b32
surface
#c3cbd8
--theme-primary: oklch(0.54 0.12 260);
--theme-accent: oklch(0.64 0.12 65);
--theme-surface: oklch(0.84 0.02 260);

Transform values without losing their names

Darken the complete palette once. The keys remain primary, accent, and surface through transformation and CSS export.

Change the complete palette at once

ColorPalette returns a new palette with the same keys and order. The source palette remains unchanged.

<?php

use PhpColor\Color\Palette\ColorPalette;

$palette = ColorPalette::parse([
    'primary' => 'oklch(0.62 0.12 260)',
    'accent' => 'oklch(0.72 0.12 65)',
    'surface' => 'oklch(0.92 0.02 260)',
]);

$result = $palette->darken(0.08);

echo $result->toCssVariables('theme');

//   --theme-primary: oklch(0.54 0.12 260);
//   --theme-accent: oklch(0.64 0.12 65);
//   --theme-surface: oklch(0.84 0.02 260);
use PhpColor\Color\Palette\ColorPalette; $palette = ColorPalette::parse([ 'primary' => 'oklch(0.62 0.12 260)', 'accent' => 'oklch(0.72 0.12 65)', 'surface' => 'oklch(0.92 0.02 260)', ]); $result = $palette->darken(0.08); echo $result->toCssVariables('theme'); // --theme-primary: oklch(0.54 0.12 260); // --theme-accent: oklch(0.64 0.12 65); // --theme-surface: oklch(0.84 0.02 260);

Choose the collection that matches the job

Use a named palette when colors have application roles such as primary or surface. Use a scale when position and progression matter more than names.

Stable keysNames survive collection operations.
Stable orderIteration remains predictable.
Typed colorsEvery value remains a color object.
Direct exportKeys become CSS custom-property names.

Provide the meaning your application needs

PHPColor preserves the names you provide. It does not infer whether a color is a background, text, border, or accent.

A collection-wide transformation does not guarantee contrast.

CSS variable export returns declarations, not a complete selector or stylesheet.

Palette export is not a multi-format design-token document.

Choose a next step

Build and export a named palette