<h1>Monochromatic Scale Using Relative Colors</h1>

<div class="row">
  <div class="swatch swatch1">L+0.4</div>
  <div class="swatch swatch2">L+0.3</div>
  <div class="swatch swatch3">L+0.2</div>
  <div class="swatch swatch4">L+0.1</div>
  <div class="swatch swatch5">Base</div>
  <div class="swatch swatch6">L-0.1</div>
  <div class="swatch swatch7">L-0.2</div>
  <div class="swatch swatch8">L-0.3</div>
  <div class="swatch swatch9">L-0.4</div>
</div>

:root {
  /*   --base: oklch(0.79 0.17 73.3); */
  --base: oklch(0.31 0.2 265);
  /*   --base: oklch(0.56 0.05 238); */
  /*   --base: oklch(0.45 0.25 294); */
  --light-color: white;
  --dark-color: black;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: smokewhite;
  font-family: system-ui, sans-serif;
}

.row {
  display: flex;
  gap: 10px;
}

.swatch {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
}

.swatch1 {
  background-color: oklch(from var(--base) calc(l + 0.4) c h);
  color: color-contrast(
    oklch(from var(--base) calc(l + 0.4) c h) vs var(--light-color),
    var(--dark-color)
  );
}

.swatch2 {
  background-color: oklch(from var(--base) calc(l + 0.3) c h);
  color: color-contrast(
    oklch(from var(--base) calc(l + 0.3) c h) vs var(--light-color),
    var(--dark-color)
  );
}

.swatch3 {
  background-color: oklch(from var(--base) calc(l + 0.2) c h);
  color: color-contrast(
    oklch(from var(--base) calc(l + 0.2) c h) vs var(--light-color),
    var(--dark-color)
  );
}

.swatch4 {
  background-color: oklch(from var(--base) calc(l + 0.1) c h);
  color: color-contrast(
    oklch(from var(--base) calc(l + 0.1) c h) vs var(--light-color),
    var(--dark-color)
  );
}

.swatch5 {
  background-color: var(--base);
  color: color-contrast(var(--base) vs var(--light-color), var(--dark-color));
}

.swatch6 {
  background-color: oklch(from var(--base) calc(l - 0.1) c h);
  color: color-contrast(
    oklch(from var(--base) calc(l - 0.1) c h) vs var(--light-color),
    var(--dark-color)
  );
}

.swatch7 {
  background-color: oklch(from var(--base) calc(l - 0.2) c h);
  color: color-contrast(
    oklch(from var(--base) calc(l - 0.2) c h) vs var(--light-color),
    var(--dark-color)
  );
}

.swatch8 {
  background-color: oklch(from var(--base) calc(l - 0.3) c h);
  color: color-contrast(
    oklch(from var(--base) calc(l - 0.3) c h) vs var(--light-color),
    var(--dark-color)
  );
}

.swatch9 {
  background-color: oklch(from var(--base) calc(l - 0.4) c h);
  color: color-contrast(
    oklch(from var(--base) calc(l - 0.4) c h) vs var(--light-color),
    var(--dark-color)
  );
}