<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>