<ul>
  <li class="item">
    <p>Original color palette</p>
    <div class="palette">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </li>
  <li class="item">
    <p>red 10%</p>
    <div class="palette warm">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </li>
  <li class="item">
    <p>red 20%</p>
    <div class="palette warm warm--20">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </li>
  <li class="item">
    <p>blue 10%</p>
    <div class="palette cool">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </li>
  <li class="item">
    <p>blue 20%</p>
    <div class="palette cool cool--20">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </li>
  <li class="item">
    <p>white 40%</p>
    <div class="palette white" style="--amount: 40%">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </li>
</ul>

* {
  box-sizing: border-box;
}

:root {
  --yellow: rgb(221, 215, 141);
  --peach: rgb(220, 191, 133);
  --chocolate: rgb(139, 99, 92);
  --khaki: rgb(96, 89, 77);
  --grey: rgb(147, 162, 155);

  --mix-warm: red;
  --mix-cool: blue;
}

body {
  margin: 0;
  padding: 1rem;
  font-family: "Helvetica", sans-serif;
}

ul {
  list-style: none;
  padding: 0;
  max-width: 900px;
  margin: 0 auto;
}

.item {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1rem;
}

.palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  & > div {
    --color: var(--yellow);
    aspect-ratio: 1;
    background: var(--color);

    &:nth-child(2) {
      --color: var(--peach);
    }

    &:nth-child(3) {
      --color: var(--chocolate);
    }

    &:nth-child(4) {
      --color: var(--khaki);
    }

    &:nth-child(5) {
      --color: var(--grey);
    }
  }
}

.item:not(:first-child) {
  .palette > div {
    background: color-mix(
      in srgb,
      var(--color),
      var(--mix, var(--color)) var(--amount, 10%)
    );
  }
}

.cool {
  --mix: var(--mix-cool);
}

.cool--20 {
  --amount: 20%;
}

.warm {
  --mix: var(--mix-warm);
}

.warm--20 {
  --amount: 20%;
}

.white {
  --mix: #fff;
}