Tonal Palette with pure css

Question

I don't know how to implement this design system in pure css. Can anyone guide me what css fucntion to use ?

Is this about increase/decrease lightness in hsl function? My first time doing this kind of thing so please suggest me best-practice way.

Answer 1

You can use css variables where you specify --l value for each cell. In the example, I drew a yellow-blue palette:

.tonal {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  height: 100px;
  background: #fff;
}

.tonal div {
  position: relative;
}

.tonal div:before {
  content: '';
  position: absolute;
  inset: 0;
  background: hsl(var(--h), var(--s), var(--l));
}

.tonal div:after {
  content: attr(data-value);
  padding: 8px;
  text-align: center;
  display: block;
  color: #fff;
  mix-blend-mode: difference;
}

<div class="tonal" style="--h:210; --s:100%;">
  <div style="--l:0%" data-value="0"></div>
  <div style="--l:10%" data-value="10"></div>
  <div style="--l:20%" data-value="20"></div>
  <div style="--l:30%" data-value="30"></div>
  <div style="--l:40%" data-value="40"></div>
  <div style="--l:50%" data-value="50"></div>
  <div style="--l:60%" data-value="60"></div>
  <div style="--l:70%" data-value="70"></div>
  <div style="--l:80%" data-value="80"></div>
  <div style="--l:90%" data-value="90"></div>
  <div style="--l:95%" data-value="95"></div>
  <div style="--l:99%" data-value="99"></div>
  <div style="--l:100%" data-value="100"></div>
</div>
<div class="tonal" style="--h:60; --s:100%;">
  <div style="--l:0%" data-value="0"></div>
  <div style="--l:10%" data-value="10"></div>
  <div style="--l:20%" data-value="20"></div>
  <div style="--l:30%" data-value="30"></div>
  <div style="--l:40%" data-value="40"></div>
  <div style="--l:50%" data-value="50"></div>
  <div style="--l:60%" data-value="60"></div>
  <div style="--l:70%" data-value="70"></div>
  <div style="--l:80%" data-value="80"></div>
  <div style="--l:90%" data-value="90"></div>
  <div style="--l:95%" data-value="95"></div>
  <div style="--l:99%" data-value="99"></div>
  <div style="--l:100%" data-value="100"></div>
</div>