<main>
  <table data-theme-container>
    <caption>Final color schemes</caption>
    <tbody>
      <tr data-theme="color-1">
        <td class="bg-1">180,100%,5%</td>
        <td class="bg-2">180,100%,10%</td>
        <td class="bg-3">180,100%,15%</td>
        <td class="bg-4">180,100%,20%</td>
        <td class="bg-5">180,100%,25%</td>
        <td class="bg-6">180,100%,30%</td>
      </tr>
      <tr data-theme="color-2">
        <td class="bg-1">180,100%,5%</td>
        <td class="bg-2">180,100%,10%</td>
        <td class="bg-3">180,100%,15%</td>
        <td class="bg-4">180,100%,20%</td>
        <td class="bg-5">180,100%,25%</td>
        <td class="bg-6">180,100%,30%</td>
      </tr>
      <tr data-theme="color-3">
        <td class="bg-1">180,100%,5%</td>
        <td class="bg-2">180,100%,10%</td>
        <td class="bg-3">180,100%,15%</td>
        <td class="bg-4">180,100%,20%</td>
        <td class="bg-5">180,100%,25%</td>
        <td class="bg-6">180,100%,30%</td>
      </tr>
      <tr data-theme="color-4">
        <td class="bg-1">180,100%,5%</td>
        <td class="bg-2">180,100%,10%</td>
        <td class="bg-3">180,100%,15%</td>
        <td class="bg-4">180,100%,20%</td>
        <td class="bg-5">180,100%,25%</td>
        <td class="bg-6">180,100%,30%</td>
      </tr>
      <tr data-theme="color-5">
        <td class="bg-1">180,100%,5%</td>
        <td class="bg-2">180,100%,10%</td>
        <td class="bg-3">180,100%,15%</td>
        <td class="bg-4">180,100%,20%</td>
        <td class="bg-5">180,100%,25%</td>
        <td class="bg-6">180,100%,30%</td>
      </tr>
      <tr data-theme="color-6">
        <td class="bg-1">180,100%,5%</td>
        <td class="bg-2">180,100%,10%</td>
        <td class="bg-3">180,100%,15%</td>
        <td class="bg-4">180,100%,20%</td>
        <td class="bg-5">180,100%,25%</td>
        <td class="bg-6">180,100%,30%</td>
      </tr>
    </tbody>
  </table>
</main>

// variable definiton, [data-theme-container] is the <tr>
[data-theme-container] {
  // number of themes, hue of first color, hue-step to next hue
  --theme-count: 6;
  --first-hue: 180;
  --hue-step: calc(360 / var(--theme-count));

  // number of shades, steps of lightness
  --shade-count: 6;
  --lgt-step: 5%;
  
  // lightness definitions, a preprocessor would be nice
  --lgt-1: var(--lgt-step); // 10%
  --lgt-2: calc(var(--lgt-1) + var(--lgt-step)); // 15%
  --lgt-3: calc(var(--lgt-2) + var(--lgt-step)); // 20%
  --lgt-4: calc(var(--lgt-3) + var(--lgt-step)); // 25%
  --lgt-5: calc(var(--lgt-4) + var(--lgt-step)); // 30%
  --lgt-6: calc(var(--lgt-5) + var(--lgt-step)); // 35%
}

// hue definitions, also something for a preprocessor
[data-theme="color-1"] {
  --hue: var(--first-hue); // 180
}

[data-theme="color-2"] {
  --hue: calc(var(--first-hue) + calc(var(--hue-step))); // 240
}

[data-theme="color-3"] {
  --hue: calc(var(--first-hue) + calc(var(--hue-step) * 2)); // 300
}

[data-theme="color-4"] {
  --hue: calc(var(--first-hue) + calc(var(--hue-step) * 3)); // 360 => 0
}

[data-theme="color-5"] {
  --hue: calc(var(--first-hue) + calc(var(--hue-step) * 4)); // 420 => 60
}

[data-theme="color-6"] {
  --hue: calc(var(--first-hue) + calc(var(--hue-step) * 5)); // 480 => 120
}

// assignment of all colors, same for all themes
.bg-1 {
  background: hsl(var(--hue), 100%, var(--lgt-1));
}

.bg-2 {
  background: hsl(var(--hue), 100%, var(--lgt-2));
}

.bg-3 {
  background: hsl(var(--hue), 100%, var(--lgt-3));
}

.bg-4 {
  background: hsl(var(--hue), 100%, var(--lgt-4));
}

.bg-5 {
  background: hsl(var(--hue), 100%, var(--lgt-5));
}

.bg-6 {
  background: hsl(var(--hue), 100%, var(--lgt-6));
}
View Compiled

External CSS

  1. https://codepen.io/draber/pen/BayEGwb
  2. https://codepen.io/draber/pen/OJVPrpx

External JavaScript

This Pen doesn't use any external JavaScript resources.