<div class="container" style="--lightness: 90%; --chroma: 0.25;">
  <div class="box" style="--hue: 60">90% 0.25 60</div>
  <div class="box" style="--hue: 120">90% 0.25 120</div>
  <div class="box" style="--hue: 180">90% 0.25 180</div>
  <div class="box" style="--hue: 240">90% 0.25 240</div>
  <div class="box" style="--hue: 300">90% 0.25 300</div>
  <div class="box" style="--hue: 360">90% 0.25 360</div>
</div>
<div class="container" style="--lightness: 75%; --chroma: 0.23;">
  <div class="box" style="--hue: 60">75% 0.23 60</div>
  <div class="box" style="--hue: 120">75% 0.23 120</div>
  <div class="box" style="--hue: 180">75% 0.23 180</div>
  <div class="box" style="--hue: 240">75% 0.23 240</div>
  <div class="box" style="--hue: 300">75% 0.23 300</div>
  <div class="box" style="--hue: 360">75% 0.23 360</div>
</div>
<div class="container" style="--lightness: 60%; --chroma: 0.21;">
  <div class="box" style="--hue: 60">60% 0.21 60</div>
  <div class="box" style="--hue: 120">60% 0.21 120</div>
  <div class="box" style="--hue: 180">60% 0.21 180</div>
  <div class="box" style="--hue: 240">60% 0.21 240</div>
  <div class="box" style="--hue: 300">60% 0.21 300</div>
  <div class="box" style="--hue: 360">60% 0.21 360</div>
</div>
<div class="container" style="--lightness: 45%; --chroma: 0.19;">
  <div class="box" style="--hue: 60">45% 0.19 60</div>
  <div class="box" style="--hue: 120">45% 0.19 120</div>
  <div class="box" style="--hue: 180">45% 0.19 180</div>
  <div class="box" style="--hue: 240">45% 0.19 240</div>
  <div class="box" style="--hue: 300">45% 0.19 300</div>
  <div class="box" style="--hue: 360">45% 0.19 360</div>
</div>
<div class="container" style="--lightness: 30%; --chroma: 0.17;">
  <div class="box" style="--hue: 60">30% 0.17 60</div>
  <div class="box" style="--hue: 120">30% 0.17 120</div>
  <div class="box" style="--hue: 180">30% 0.17 180</div>
  <div class="box" style="--hue: 240">30% 0.17 240</div>
  <div class="box" style="--hue: 300">30% 0.17 300</div>
  <div class="box" style="--hue: 360">30% 0.17 360</div>
</div>
<div class="container" style="--lightness: 15%; --chroma: 0.15;">
  <div class="box" style="--hue: 60">15% 0.15 60</div>
  <div class="box" style="--hue: 120">15% 0.15 120</div>
  <div class="box" style="--hue: 180">15% 0.15 180</div>
  <div class="box" style="--hue: 240">15% 0.15 240</div>
  <div class="box" style="--hue: 300">15% 0.15 300</div>
  <div class="box" style="--hue: 360">15% 0.15 360</div>
</div>

.container {
  display: flex;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
}

.box {
  width: 100px;
  height: 100px;
  color: #fff;
  font-size: 12px;
  line-height: 100px;
  text-align: center;
  background-color: oklch(var(--lightness) var(--chroma) var(--hue));
}