<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%);
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.