<main>
  <table>
    <caption>Colors built from CSS Variables</caption>
    <tbody>
      <tr data-theme="color-1">
        <td class="bg-1">180,100%,10%</td>
        <td class="bg-2">180,100%,15%</td>
        <td class="bg-3">180,100%,20%</td>
        <td class="bg-4">180,100%,25%</td>
        <td class="bg-5">180,100%,30%</td>
        <td class="bg-6">180,100%,35%</td>
      </tr>
      <tr data-theme="color-2">
        <td class="bg-1">300,100%,10%</td>
        <td class="bg-2">300,100%,15%</td>
        <td class="bg-3">300,100%,20%</td>
        <td class="bg-4">300,100%,25%</td>
        <td class="bg-5">300,100%,30%</td>
        <td class="bg-6">300,100%,35%</td>
      </tr>
    </tbody>
  </table>
</main>
// variable definitions
[data-theme="color-1"] {
  --shade-1: hsl(180, 100%, 10%);
  --shade-2: hsl(180, 100%, 15%);
  --shade-3: hsl(180, 100%, 20%);
  --shade-4: hsl(180, 100%, 25%);
  --shade-5: hsl(180, 100%, 30%);
  --shade-6: hsl(180, 100%, 35%);
}

[data-theme="color-2"] {
  --shade-1: hsl(300, 100%, 10%);
  --shade-2: hsl(300, 100%, 15%);
  --shade-3: hsl(300, 100%, 20%);
  --shade-4: hsl(300, 100%, 25%);
  --shade-5: hsl(300, 100%, 30%);
  --shade-6: hsl(300, 100%, 35%);
}

.bg-1 {
  background: var(--shade-1);
}

.bg-2 {
  background: var(--shade-2);
}

.bg-3 {
  background: var(--shade-3);
}

.bg-4 {
  background: var(--shade-4);
}

.bg-5 {
  background: var(--shade-5);
}

.bg-6 {
  background: var(--shade-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.