<main>
  <table>
    <caption>Base scheme, all values in HSL</caption>
    <tbody>
      <tr>
        <td class="bg-1">180,100%,10%</td>
        <td class="bg-2">180,100%,15%</td>
        <td class="bg-3">180,100%,20%</td>
      </tr>
      <tr>
        <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>
    </tbody>
  </table>
</main>
// color scheme
// in HSL, only one value changes 
// in RGB this is more complex
.bg-1 {
  // rgb(0, 51, 51)
  background: hsl(180, 100%, 10%);
}

.bg-2 {
  // rgb(0, 77, 77)
  background: hsl(180, 100%, 15%);
}

.bg-3 {
  // rgb(0, 102, 102)
  background: hsl(180, 100%, 20%);
}

.bg-4 {
  // rgb(0, 128, 128)
  background: hsl(180, 100%, 25%);
}

.bg-5 {
  // rgb(0, 153, 153)
  background: hsl(180, 100%, 30%);
}

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