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