<style>
  :root {
    --tint: var(--indigo);

    --gray: oklch(0.5 0 0);
    --red: oklch(0.6 0.181447 27.0726);
    --orange: oklch(0.7 0.150492 54);
    --yellow: oklch(0.8 0.128516 73.8032);
    --turquoise: oklch(0.5 0.081146 205.114);
    --cyan: oklch(0.4 0.142107 243.926);
    --green: oklch(0.5 0.121276 155.372);
    --blue: oklch(0.5 0.22049 266.315);
    --indigo: oklch(1 0.25049 284.23);
    --purple: oklch(0.7 0.223324 302);
    --pink: oklch(0.6 0.177717 347.813);

    --lightness-100: 98.1187%;
    --lightness-200: 95.2045%;
    --lightness-300: 91.1434%;
    --lightness-400: 85.1751%;
    --lightness-500: 79.1773%;
    --lightness-600: 72.3297%;
    --lightness-700: 67.0121%;
    --lightness-800: 62.3039%;
    --lightness-900: 57.9699%;
    --lightness-1000: 51.9076%;
    --lightness-1100: 46.9058%;
    --lightness-1200: 41.0821%;
    --lightness-1300: 35.3616%;
    --lightness-1400: 29.6725%;
    --lightness-1500: 24.5366%;
    --lightness-1600: 16.6959%;

    /* lower chroma at low lightness levels */
    --chroma-100: calc(l * c * 0.5);
    --chroma-200: calc(l * c * 0.6);
    --chroma-300: calc(l * c * 0.7);
    --chroma-400: calc(l * c * 0.8);
    --chroma-500: calc(l * c * 0.9);
    --chroma-600: c;
    --chroma-700: c;
    --chroma-800: c;
    --chroma-900: c;
    --chroma-1000: c;
    --chroma-1100: c;
    --chroma-1200: c;
    --chroma-1300: c;
    --chroma-1400: c;
    --chroma-1500: c;
    --chroma-1600: c;

    /** tint color scale */
    --tint-100: oklch(
      from var(--tint) var(--lightness-100) var(--chroma-100) h
    );
    --tint-200: oklch(
      from var(--tint) var(--lightness-200) var(--chroma-200) h
    );
    --tint-300: oklch(
      from var(--tint) var(--lightness-300) var(--chroma-300) h
    );
    --tint-400: oklch(
      from var(--tint) var(--lightness-400) var(--chroma-400) h
    );
    --tint-500: oklch(
      from var(--tint) var(--lightness-500) var(--chroma-500) h
    );
    --tint-600: oklch(
      from var(--tint) var(--lightness-600) var(--chroma-600) h
    );
    --tint-700: oklch(
      from var(--tint) var(--lightness-700) var(--chroma-700) h
    );
    --tint-800: oklch(
      from var(--tint) var(--lightness-800) var(--chroma-800) h
    );
    --tint-900: oklch(
      from var(--tint) var(--lightness-900) var(--chroma-900) h
    );
    --tint-1000: oklch(
      from var(--tint) var(--lightness-1000) var(--chroma-1000) h
    );
    --tint-1100: oklch(
      from var(--tint) var(--lightness-1100) var(--chroma-1100) h
    );
    --tint-1200: oklch(
      from var(--tint) var(--lightness-1200) var(--chroma-1200) h
    );
    --tint-1300: oklch(
      from var(--tint) var(--lightness-1300) var(--chroma-1300) h
    );
    --tint-1400: oklch(
      from var(--tint) var(--lightness-1400) var(--chroma-1400) h
    );
    --tint-1500: oklch(
      from var(--tint) var(--lightness-1500) var(--chroma-1500) h
    );
    --tint-1600: oklch(
      from var(--tint) var(--lightness-1600) var(--chroma-1600) h
    );

    @media (prefers-color-scheme: dark) {
      --lightness-100: 16.6959%;
      --lightness-200: 24.5366%;
      --lightness-300: 29.6725%;
      --lightness-400: 35.3616%;
      --lightness-500: 41.0821%;
      --lightness-600: 46.9058%;
      --lightness-700: 51.9076%;
      --lightness-800: 57.9699%;
      --lightness-900: 62.3039%;
      --lightness-1000: 67.0121%;
      --lightness-1100: 72.3297%;
      --lightness-1200: 79.1773%;
      --lightness-1300: 85.1751%;
      --lightness-1400: 91.1434%;
      --lightness-1500: 95.2045%;
      --lightness-1600: 98.1187%;
    }
  }

  .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(--tint-100)"></div>
<div style="background: var(--tint-200)"></div>
<div style="background: var(--tint-300)"></div>
<div style="background: var(--tint-400)"></div>
<div style="background: var(--tint-500)"></div>
<div style="background: var(--tint-600)"></div>
<div style="background: var(--tint-700)"></div>
<div style="background: var(--tint-800)"></div>
<div style="background: var(--tint-900)"></div>
<div style="background: var(--tint-1000)"></div>
<div style="background: var(--tint-1100)"></div>
<div style="background: var(--tint-1200)"></div>
<div style="background: var(--tint-1300)"></div>
<div style="background: var(--tint-1400)"></div>
<div style="background: var(--tint-1500)"></div>
<div style="background: var(--tint-1600)"></div>