Color palette with CSS relative colors

html #color#css#ui
<style>
	:root {
		--base-color: deeppink;

		--hue-red: 25;
		--hue-pink: 350;
		--hue-purple: 310;
		--hue-violet: 290;
		--hue-indigo: 270;
		--hue-blue: 240;
		--hue-cyan: 210;
		--hue-teal: 185;
		--hue-green: 145;
		--hue-lime: 125;
		--hue-yellow: 100;
		--hue-orange: 75;

		--hue: var(--hue-green);

		--color-0: oklch(from var(--base-color) calc(l + 0.2) c h);
		/* lightest */
		--color-1: oklch(from var(--base-color) calc(l + 0.1) c h);
		--color-2: var(--base-color);
		--color-3: oklch(from var(--base-color) calc(l - 0.1) c h);
		--color-4: oklch(from var(--base-color) calc(l - 0.2) c h);
		/* darkest */

		--color-1: var(--base-color);
		--color-2: oklch(from var(--base-color) calc(l - 0.1) c calc(h - 10));
		--color-3: oklch(from var(--base-color) calc(l - 0.2) c calc(h - 20));
		--color-4: oklch(from var(--base-color) calc(l - 0.3) c calc(h - 30));
		--color-5: oklch(from var(--base-color) calc(l - 0.4) c calc(h - 40));

		--color-100: oklch(99% 0.03 var(--hue, 0));
		--color-200: oklch(95% 0.06 var(--hue, 0));
		--color-300: oklch(88% 0.12 var(--hue, 0));
		--color-400: oklch(80% 0.14 var(--hue, 0));
		--color-500: oklch(74% 0.16 var(--hue, 0));
		--color-600: oklch(68% 0.19 var(--hue, 0));
		--color-700: oklch(63% 0.2 var(--hue, 0));
		--color-800: oklch(58% 0.21 var(--hue, 0));
		--color-900: oklch(53% 0.2 var(--hue, 0));
		--color-1000: oklch(49% 0.19 var(--hue, 0));
		--color-1100: oklch(42% 0.17 var(--hue, 0));
		--color-1200: oklch(35% 0.15 var(--hue, 0));
		--color-1300: oklch(27% 0.12 var(--hue, 0));
		--color-1400: oklch(20% 0.09 var(--hue, 0));
		--color-1500: oklch(14% 0.07 var(--hue, 0));
		--color-1600: oklch(11% 0.05 var(--hue, 0));
	}

	.swatch:nth-child(1) {
		background: var(--color-4);
	}

	.swatch:nth-child(2) {
		background: var(--color-3);
	}

	.swatch.primary {
		background: var(--color-2);
	}

	.swatch:nth-child(4) {
		background: var(--color-1);
	}

	.swatch:nth-child(5) {
		background: var(--color-0);
	}

	body {
		display: grid;
	}
</style>

<div style="background: var(--color-100)"></div>
<div style="background: var(--color-200)"></div>
<div style="background: var(--color-300)"></div>
<div style="background: var(--color-400)"></div>
<div style="background: var(--color-500)"></div>
<div style="background: var(--color-600)"></div>
<div style="background: var(--color-700)"></div>
<div style="background: var(--color-800)"></div>
<div style="background: var(--color-900)"></div>
<div style="background: var(--color-1000)"></div>
<div style="background: var(--color-1100)"></div>
<div style="background: var(--color-1200)"></div>
<div style="background: var(--color-1300)"></div>
<div style="background: var(--color-1400)"></div>
<div style="background: var(--color-1500)"></div>
<div style="background: var(--color-1600)"></div>