<article class="red color-swatchset" data-title="Red">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</article>
<article class="pink color-swatchset" data-title="Pink">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</article>
<article class="purple color-swatchset" data-title="Purple">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</article>
<article class="violet color-swatchset" data-title="Violet">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</article>
<article class="indigo color-swatchset" data-title="Indigo">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</article>
<article class="blue color-swatchset" data-title="Blue">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</article>
<article class="cyan color-swatchset" data-title="Cyan">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</article>
<article class="teal color-swatchset" data-title="Teal">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</article>
<article class="green color-swatchset" data-title="Green">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</article>
<article class="lime color-swatchset" data-title="Lime">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</article>
<!-- <article class="yellow color-swatchset" data-title="Yellow">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</article> -->
<article class="orange color-swatchset" data-title="Orange">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</article>
<article class="gray-hueless gray-swatchset" data-title="Neutral Gray">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</article>
<article class="gray-warm gray-swatchset" data-title="Stone Gray">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</article>
<article class="gray-cool gray-swatchset" data-title="Cool Gray">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</article>
@import "https://unpkg.com/open-props/oklch-hues.min.css";
@import "https://unpkg.com/open-props/colors-oklch.min.css";
@import "https://unpkg.com/open-props/gray-oklch.min.css";
.red { --color-hue: var(--hue-red) }
.pink { --color-hue: var(--hue-pink) }
.purple { --color-hue: var(--hue-purple) }
.violet { --color-hue: var(--hue-violet) }
.indigo { --color-hue: var(--hue-indigo) }
.blue { --color-hue: var(--hue-blue) }
.cyan { --color-hue: var(--hue-cyan) }
.teal { --color-hue: var(--hue-teal) }
.green { --color-hue: var(--hue-green) }
.lime { --color-hue: var(--hue-lime) }
.yellow { --color-hue: var(--hue-yellow) }
.orange { --color-hue: var(--hue-orange) }
.color-swatchset {
& > .swatch:nth-of-type(1) { background: var(--color-0) }
& > .swatch:nth-of-type(2) { background: var(--color-1) }
& > .swatch:nth-of-type(3) { background: var(--color-2) }
& > .swatch:nth-of-type(4) { background: var(--color-3) }
& > .swatch:nth-of-type(5) { background: var(--color-4) }
& > .swatch:nth-of-type(6) { background: var(--color-5) }
& > .swatch:nth-of-type(7) { background: var(--color-6) }
& > .swatch:nth-of-type(8) { background: var(--color-7) }
& > .swatch:nth-of-type(9) { background: var(--color-8) }
& > .swatch:nth-of-type(10) { background: var(--color-9) }
& > .swatch:nth-of-type(11) { background: var(--color-10) }
& > .swatch:nth-of-type(12) { background: var(--color-11) }
& > .swatch:nth-of-type(13) { background: var(--color-12) }
& > .swatch:nth-of-type(14) { background: var(--color-13) }
& > .swatch:nth-of-type(15) { background: var(--color-14) }
& > .swatch:nth-of-type(16) { background: var(--color-15) }
}
.gray-swatchset {
& > .swatch:nth-of-type(1) { background: var(--gray-0) }
& > .swatch:nth-of-type(2) { background: var(--gray-1) }
& > .swatch:nth-of-type(3) { background: var(--gray-2) }
& > .swatch:nth-of-type(4) { background: var(--gray-3) }
& > .swatch:nth-of-type(5) { background: var(--gray-4) }
& > .swatch:nth-of-type(6) { background: var(--gray-5) }
& > .swatch:nth-of-type(7) { background: var(--gray-6) }
& > .swatch:nth-of-type(8) { background: var(--gray-7) }
& > .swatch:nth-of-type(9) { background: var(--gray-8) }
& > .swatch:nth-of-type(10) { background: var(--gray-9) }
& > .swatch:nth-of-type(11) { background: var(--gray-10) }
& > .swatch:nth-of-type(12) { background: var(--gray-11) }
& > .swatch:nth-of-type(13) { background: var(--gray-12) }
& > .swatch:nth-of-type(14) { background: var(--gray-13) }
& > .swatch:nth-of-type(15) { background: var(--gray-14) }
& > .swatch:nth-of-type(16) { background: var(--gray-15) }
}
.gray-cool {
--gray-hue: 270;
--gray-chroma: .02;
}
.gray-warm {
--gray-hue: 50;
--gray-chroma: .01;
}
.gray-hueless {
---chroma: none;
}
html {
block-size: 100%;
}
body {
min-block-size: 100%;
font-family: system-ui, sans-serif;
display: flex;
gap: 5px;
margin: 0;
}
article {
flex: 1 0 20ch;
display: grid;
gap: 0px;
position: relative;
&::before {
content: attr(data-title);
display: grid;
place-items: center;
background: var(--color-bright);
color: white;
}
&:is(.gray-cool,.gray-warm,.gray-hueless)::before {
background: var(--gray-7);
}
}
h5 {
margin: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.