<main>
  <table>
    <caption>Base hues</caption>
    <tbody>
      <tr>
        <td class="bg-1">180,100%,10%</td>
        <td class="bg-2">240,100%,10%</td>
        <td class="bg-3">300,100%,10%</td>
      </tr>
      <tr>
        <td class="bg-4">0,100%,10%</td>
        <td class="bg-5">60,100%,10%</td>
        <td class="bg-6">120,100%,10%</td>
      </tr>
    </tbody>
  </table>
</main>
// base hues
.bg-1 {
  // rgb(0, 51, 51)
  background: hsl(180, 100%, 10%);
}

.bg-2 {
  // rgb(0, 0, 51)
  background: hsl(240, 100%, 10%);
}

.bg-3 {
  // rgb(51, 0, 51)
  background: hsl(300, 100%, 10%);
}

.bg-4 {
  // rgb(51, 0, 0)
  background: hsl(0, 100%, 10%);
}

.bg-5 {
  // rgb(51, 51, 0)
  background: hsl(60, 100%, 10%);
}

.bg-6 {
  // rgb(0, 51, 0)
  background: hsl(120, 100%, 10%);
}
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.