CodePen Embed - Open Props

 <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>

@use postcss-nested;

.red, .red .swatch        { --hue: 25 }
.pink, .pink .swatch      { --hue: 350 }
.purple, .purple .swatch  { --hue: 310 }
.violet, .violet .swatch  { --hue: 290 }
.indigo, .indigo .swatch  { --hue: 270 }
.blue, .blue .swatch      { --hue: 240 }
.cyan, .cyan .swatch      { --hue: 210 }
.teal, .teal .swatch      { --hue: 185 }
.green, .green .swatch    { --hue: 145 }
.lime, .lime .swatch      { --hue: 125 }
.yellow, .yellow .swatch  { --hue: 100 }
.orange, .orange .swatch  { --hue: 75 }

* {
  --hue: 230;
  
  --color-max: oklch(65% .3 var(--hue));
  --color-0:  oklch(99% .03 var(--hue));
  --color-1:  oklch(95% .06 var(--hue));
  --color-2:  oklch(88% .12 var(--hue));
  --color-3:  oklch(80% .14 var(--hue));
  --color-4:  oklch(74% .16 var(--hue));
  --color-5:  oklch(68% .19 var(--hue));
  --color-6:  oklch(63% .20 var(--hue));
  --color-7:  oklch(58% .21 var(--hue));
  --color-8:  oklch(53% .20 var(--hue));
  --color-9:  oklch(49% .19 var(--hue));
  --color-10: oklch(42% .17 var(--hue));
  --color-11: oklch(35% .15 var(--hue));
  --color-12: oklch(27% .12 var(--hue));
  --color-13: oklch(20% .09 var(--hue));
  --color-14: oklch(14% .07 var(--hue));
  --color-15: oklch(11% .05 var(--hue));
  
  --gray-0:  oklch(99% var(--_gray-chroma, .02) var(--hue));
  --gray-1:  oklch(95% var(--_gray-chroma, .02) var(--hue));
  --gray-2:  oklch(88% var(--_gray-chroma, .03) var(--hue));
  --gray-3:  oklch(80% var(--_gray-chroma, .04) var(--hue));
  --gray-4:  oklch(74% var(--_gray-chroma, .05) var(--hue));
  --gray-5:  oklch(68% var(--_gray-chroma, .05) var(--hue));
  --gray-6:  oklch(63% var(--_gray-chroma, .05) var(--hue));
  --gray-7:  oklch(58% var(--_gray-chroma, .05) var(--hue));
  --gray-8:  oklch(53% var(--_gray-chroma, .05) var(--hue));
  --gray-9:  oklch(49% var(--_gray-chroma, .05) var(--hue));
  --gray-10: oklch(43% var(--_gray-chroma, .045) var(--hue));
  --gray-11: oklch(37% var(--_gray-chroma, .04) var(--hue));
  --gray-12: oklch(31% var(--_gray-chroma, .03) var(--hue));
  --gray-13: oklch(25% var(--_gray-chroma, .02) var(--hue));
  --gray-14: oklch(18% var(--_gray-chroma, .02) var(--hue));
  --gray-15: oklch(10% var(--_gray-chroma, .04) var(--hue));
} 

.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-cool .swatch { 
  --hue: 270; 
  --_gray-chroma: .02;
}
.gray-warm, .gray-warm .swatch { 
  --hue: 50; 
  --_gray-chroma: .01;
}
.gray-hueless, .gray-hueless .swatch { 
  --_gray-base: none; 
  --_gray-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-max);
    color: white;
  }
  
  &:is(.gray-cool,.gray-warm,.gray-hueless)::before {
    background: var(--gray-7);
  }
}

h5 {
  margin: 0;
}

View Compiled

This Pen is owned by Adam Argyle on CodePen.

See more by @argyleink on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.