<main>
<table data-theme-container>
<caption>Final color schemes</caption>
<tbody>
<tr data-theme="color-1">
<td class="bg-1">180,100%,5%</td>
<td class="bg-2">180,100%,10%</td>
<td class="bg-3">180,100%,15%</td>
<td class="bg-4">180,100%,20%</td>
<td class="bg-5">180,100%,25%</td>
<td class="bg-6">180,100%,30%</td>
</tr>
<tr data-theme="color-2">
<td class="bg-1">180,100%,5%</td>
<td class="bg-2">180,100%,10%</td>
<td class="bg-3">180,100%,15%</td>
<td class="bg-4">180,100%,20%</td>
<td class="bg-5">180,100%,25%</td>
<td class="bg-6">180,100%,30%</td>
</tr>
<tr data-theme="color-3">
<td class="bg-1">180,100%,5%</td>
<td class="bg-2">180,100%,10%</td>
<td class="bg-3">180,100%,15%</td>
<td class="bg-4">180,100%,20%</td>
<td class="bg-5">180,100%,25%</td>
<td class="bg-6">180,100%,30%</td>
</tr>
<tr data-theme="color-4">
<td class="bg-1">180,100%,5%</td>
<td class="bg-2">180,100%,10%</td>
<td class="bg-3">180,100%,15%</td>
<td class="bg-4">180,100%,20%</td>
<td class="bg-5">180,100%,25%</td>
<td class="bg-6">180,100%,30%</td>
</tr>
<tr data-theme="color-5">
<td class="bg-1">180,100%,5%</td>
<td class="bg-2">180,100%,10%</td>
<td class="bg-3">180,100%,15%</td>
<td class="bg-4">180,100%,20%</td>
<td class="bg-5">180,100%,25%</td>
<td class="bg-6">180,100%,30%</td>
</tr>
<tr data-theme="color-6">
<td class="bg-1">180,100%,5%</td>
<td class="bg-2">180,100%,10%</td>
<td class="bg-3">180,100%,15%</td>
<td class="bg-4">180,100%,20%</td>
<td class="bg-5">180,100%,25%</td>
<td class="bg-6">180,100%,30%</td>
</tr>
</tbody>
</table>
</main>
// variable definiton, [data-theme-container] is the <tr>
[data-theme-container] {
// number of themes, hue of first color, hue-step to next hue
--theme-count: 6;
--first-hue: 180;
--hue-step: calc(360 / var(--theme-count));
// number of shades, steps of lightness
--shade-count: 6;
--lgt-step: 5%;
// lightness definitions, a preprocessor would be nice
--lgt-1: var(--lgt-step); // 10%
--lgt-2: calc(var(--lgt-1) + var(--lgt-step)); // 15%
--lgt-3: calc(var(--lgt-2) + var(--lgt-step)); // 20%
--lgt-4: calc(var(--lgt-3) + var(--lgt-step)); // 25%
--lgt-5: calc(var(--lgt-4) + var(--lgt-step)); // 30%
--lgt-6: calc(var(--lgt-5) + var(--lgt-step)); // 35%
}
// hue definitions, also something for a preprocessor
[data-theme="color-1"] {
--hue: var(--first-hue); // 180
}
[data-theme="color-2"] {
--hue: calc(var(--first-hue) + calc(var(--hue-step))); // 240
}
[data-theme="color-3"] {
--hue: calc(var(--first-hue) + calc(var(--hue-step) * 2)); // 300
}
[data-theme="color-4"] {
--hue: calc(var(--first-hue) + calc(var(--hue-step) * 3)); // 360 => 0
}
[data-theme="color-5"] {
--hue: calc(var(--first-hue) + calc(var(--hue-step) * 4)); // 420 => 60
}
[data-theme="color-6"] {
--hue: calc(var(--first-hue) + calc(var(--hue-step) * 5)); // 480 => 120
}
// assignment of all colors, same for all themes
.bg-1 {
background: hsl(var(--hue), 100%, var(--lgt-1));
}
.bg-2 {
background: hsl(var(--hue), 100%, var(--lgt-2));
}
.bg-3 {
background: hsl(var(--hue), 100%, var(--lgt-3));
}
.bg-4 {
background: hsl(var(--hue), 100%, var(--lgt-4));
}
.bg-5 {
background: hsl(var(--hue), 100%, var(--lgt-5));
}
.bg-6 {
background: hsl(var(--hue), 100%, var(--lgt-6));
}
View Compiled
This Pen doesn't use any external JavaScript resources.