<div class="swatch primary"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
@layer demo {
:root {
--base-color: lime; /* change me */
}
.swatch.primary {
background: var(--base-color);
}
.swatch:nth-child(2) {
background: oklch(from var(--base-color) l c calc(h + 90));
}
.swatch:nth-child(3) {
background: oklch(from var(--base-color) l c calc(h + 180));
}
.swatch:nth-child(4) {
background: oklch(from var(--base-color) l c calc(h + 270));
}
}
@layer demo.support {
* {
box-sizing: border-box;
margin: 0;
}
html {
block-size: 100%;
color-scheme: dark light;
}
body {
min-block-size: 100%;
font-family: system-ui, sans-serif;
display: grid;
grid-template-rows: repeat(4, 1fr);
}
}
This Pen doesn't use any external JavaScript resources.