Color Palette
Pass a hex color in the URL — the controller generates a 10-stop tint/shade scale using HSL math.
Try it
Pick a base color
Change the color query parameter to any 6-digit hex value.
Result
Your palette
Click any swatch to apply it as the site theme — saved in your browser.
50
#f3f9fb
100
#e4f0f6
200
#c9e2ee
300
#9ac9df
400
#6cb0d0
500
#3d97c2
base
600
#31799b
700
#255b74
800
#1b4355
900
#112a36
| Stop | Hex | Preview | Base? |
|---|---|---|---|
50 |
#f3f9fb |
||
100 |
#e4f0f6 |
||
200 |
#c9e2ee |
||
300 |
#9ac9df |
||
400 |
#6cb0d0 |
||
500 |
#3d97c2 |
✓ | |
600 |
#31799b |
||
700 |
#255b74 |
||
800 |
#1b4355 |
||
900 |
#112a36 |
How it works
PHP HSL math
The controller converts your hex color to HSL, then interpolates lightness across 10 stops while keeping hue and saturation constant.
src/Controller/PagesController.php
public function pageDemosPalette(): void
{
$raw = ltrim((string)$this->request->getQuery('color', '3a8fb7'), '#');
$base = preg_match('/^[0-9a-fA-F]{6}$/', $raw) ? strtolower($raw) : '3a8fb7';
$palette = $this->buildColorPalette($base);
$this->set(compact('base', 'palette'));
}
// Converts hex → RGB → HSL, then generates 10 lightness stops (50–900)
// keeping hue + saturation constant. Marks the stop closest to the
// original lightness as "isBase".
private function buildColorPalette(string $hex): array { ... }hex → RGB
Split the 6-char hex into R, G, B channels and normalise to [0, 1].
RGB → HSL
Convert to Hue (0°–360°), Saturation, and Lightness. Only the L changes per stop.
HSL → hex × 10
Plug each target L into the inverse formula and output a hex swatch for every stop.