CodePen Embed - LCH and HSL colors

<!--Colors coverted using Lea Verou’s LCH coverter https://css.land/lch/-->
<div class="main-wrapper">
  <header>
    <h1>Comparing LCH and HSL colors</h1>
    <button data-toggle hidden role="switch" checked="false">
      Grayscale<span data-text aria-hidden>: Off</span>
    </button>
  </header>
  <div class="grid">
    <div class="wrapper">
      <h2>LCH</h2>
      <section>
        <h3>Lightness</h3>
        <div class="color-strip-wrapper">
          <ol class="color-strip color-strip--lightness">
            <li><p>0%</p></li>
            <li><p>10%</p></li>
            <li><p>20%</p></li>
            <li><p>30%</p></li>
            <li><p>40%</p></li>
            <li><p>50%</p></li>
            <li><p>60%</p></li>
            <li><p>70%</p></li>
            <li><p>80%</p></li>
            <li><p>90%</p></li>
            <li><p>100%</p></li>
          </ol>
        </div>
      </section>

      <section>
        <h3>Chroma</h3>
        <div class="color-strip-wrapper">
          <ol class="color-strip color-strip--chroma">
            <li><p>0</p></li>
            <li><p>10</p></li>
            <li><p>20</p></li>
            <li><p>30</p></li>
            <li><p>40</p></li>
            <li><p>50</p></li>
            <li><p>60</p></li>
            <li><p>70</p></li>
            <li><p>80</p></li>
            <li><p>90</p></li>
            <li><p>100</p></li>
          </ol>
        </div>
      </section>

      <section>
        <h3>Hue</h3>
        <div class="color-strip-wrapper">
          <ol class="color-strip color-strip--hue">
            <li><p>0</p></li>
            <li><p>36</p></li>
            <li><p>72</p></li>
            <li><p>108</p></li>
            <li><p>144</p></li>
            <li><p>180</p></li>
            <li><p>216</p></li>
            <li><p>252</p></li>
            <li><p>288</p></li>
            <li><p>324</p></li>
            <li><p>360</p></li>
          </ol>
        </div>
      </section>
    </div>

    <div class="wrapper">
      <h2>HSL</h2>
      <section>
        <h3>Hue</h3>
        <div class="color-strip-wrapper color-strip-wrapper--hsl">
          <ol class="color-strip color-strip--hue">
            <li><p>0</p></li>
            <li><p>36</p></li>
            <li><p>72</p></li>
            <li><p>108</p></li>
            <li><p>144</p></li>
            <li><p>180</p></li>
            <li><p>216</p></li>
            <li><p>252</p></li>
            <li><p>288</p></li>
            <li><p>324</p></li>
            <li><p>360</p></li>
          </ol>
        </div>
      </section>

      <section>
        <h3>Saturation</h3>
        <div class="color-strip-wrapper color-strip-wrapper--hsl">
          <ol class="color-strip color-strip--saturation">
            <li><p>0%</p></li>
            <li><p>10%</p></li>
            <li><p>20%</p></li>
            <li><p>30%</p></li>
            <li><p>40%</p></li>
            <li><p>50%</p></li>
            <li><p>60%</p></li>
            <li><p>70%</p></li>
            <li><p>80%</p></li>
            <li><p>90%</p></li>
            <li><p>100%</p></li>
          </ol>
        </div>
      </section>

      <section>
        <h3>Lightness</h3>
        <div class="color-strip-wrapper color-strip-wrapper--hsl">
          <ol class="color-strip color-strip--lightness-hsl">
            <li><p>0%</p></li>
            <li><p>10%</p></li>
            <li><p>20%</p></li>
            <li><p>30%</p></li>
            <li><p>40%</p></li>
            <li><p>50%</p></li>
            <li><p>60%</p></li>
            <li><p>70%</p></li>
            <li><p>80%</p></li>
            <li><p>90%</p></li>
            <li><p>100%</p></li>
          </ol>
        </div>
      </section>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: Helvetica, sans-serif;
  margin: 0;
  padding: 1rem;
  min-height: 100vh;
  
  &.is-grayscale {
    .grid {
      filter: grayscale(100%);
    }
  }
}

.main-wrapper {
  max-width: 115rem;
  margin: 0 auto;
}

button {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  border: none;
  background: darkslategray;
  color: #ffffff;
  min-width: 12rem;
  
  span {
    pointer-events: none;
  }
  
  &:hover,
  &:focus {
    background: slategray;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 600px), 1fr));
  gap: 1rem;
  justify-content: center;
}

.wrapper {
  padding: max(1rem, 2vw);
  background: rgba(240, 240, 240);
  border-radius: 0.5rem;
  max-width: 60rem;
}

section + section {
  margin-top: 2rem;
}

.color-strip-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

.color-strip {
  --c0: rgb(0% 0% 0%);
  --c1: rgb(0% 10.28% 27.62%);
  --c2: rgb(0% 18.2% 44.24%);
  --c3: rgb(15.43% 26.8% 54.94%);
  --c4: rgb(26.84% 35.94% 65.43%);
  --c5: rgb(37.58% 45.53% 76.21%);
  --c6: rgb(48.28% 55.51% 87.27%);
  --c7: rgb(59.1% 65.83% 98.58%);
  --c8: rgb(73.36% 76.85% 100%);
  --c9: rgb(86.98% 88.27% 100%);
  --c10: rgb(100% 100% 100%);
  
  width: max(50rem, 100%);
  height: 5rem;
  display: flex;
  margin: 0;
  padding: 0;
  
  > li {
    --color: var(--c0);
    width: calc(100% / 11);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color);
    
    &:nth-child(2) { --i: 1; }
    &:nth-child(3) { --i: 2; }
    &:nth-child(4) { --i: 3; }
    &:nth-child(5) { --i: 4; }
    &:nth-child(6) { --i: 5; }
    &:nth-child(7) { --i: 6; }
    &:nth-child(8) { --i: 7; }
    &:nth-child(9) { --i: 8; }
    &:nth-child(10) { --i: 9; }
    &:nth-child(11) { --i: 10; }
    
    &:nth-child(2) { --color: var(--c1); }
    &:nth-child(3) { --color: var(--c2); }
    &:nth-child(4) { --color: var(--c3); }
    &:nth-child(5) { --color: var(--c4); }
    &:nth-child(6) { --color: var(--c5); }
    &:nth-child(7) { --color: var(--c6); }
    &:nth-child(8) { --color: var(--c7); }
    &:nth-child(9) { --color: var(--c8); }
    &:nth-child(10) { --color: var(--c9); }
    &:nth-child(11) { --color: var(--c10); }
  }
  
  @supports (background: lch(0% 45 282)) {
    --CONSTANTS: 45 282;
    --c0: lch(0% var(--CONSTANTS));
    --c1: lch(10% var(--CONSTANTS));
    --c2: lch(20% var(--CONSTANTS));
    --c3: lch(30% var(--CONSTANTS));
    --c4: lch(40% var(--CONSTANTS));
    --c5: lch(50% var(--CONSTANTS));
    --c6: lch(60% var(--CONSTANTS));
    --c7: lch(70% var(--CONSTANTS));
    --c8: lch(80% var(--CONSTANTS));
    --c9: lch(90% var(--CONSTANTS));
    --c10: lch(100% var(--CONSTANTS));
  }
  
  p {
    background: #ffffff;
    padding: 0.18rem 0.25rem 0.125rem;
    border-radius: 0.2rem;
    line-height: 1;
  }
}

.color-strip--chroma {
  --c0: rgb(46.63% 46.63% 46.64%);
  --c1: rgb(45.59% 46.35% 53.16%);
  --c2: rgb(44.1% 46.08% 59.69%);
  --c3: rgb(42.05% 45.84% 66.26%);
  --c4: rgb(39.3% 45.63% 72.88%);
  --c5: rgb(35.59% 45.44% 79.56%);
  --c6: rgb(30.45% 45.28% 86.3%);
  --c7: rgb(22.7% 45.16% 93.11%);
  --c8: rgb(4.71% 45.07% 99.99%);
  --c9: rgb(4.63% 45.07% 100%);
  --c10: rgb(4.63% 45.07% 100%);
  
  @supports (background: lch(0% 45 282)) {
    --L: 50%;
    --H: 282;
    --c0: lch(var(--L) 0 var(--H));
    --c1: lch(var(--L) 10 var(--H));
    --c2: lch(var(--L) 20 var(--H));
    --c3: lch(var(--L) 30 var(--H));
    --c4: lch(var(--L) 40 var(--H));
    --c5: lch(var(--L) 50 var(--H));
    --c6: lch(var(--L) 60 var(--H));
    --c7: lch(var(--L) 70 var(--H));
    --c8: lch(var(--L) 80 var(--H));
    --c9: lch(var(--L) 90 var(--H));
    --c10: lch(var(--L) 100 var(--H));
  }
}

.color-strip--hue {
  --c0: rgb(75.62% 30.45% 47.57%);
  --c1: rgb(73.61% 34.24% 28.07%);
  --c2: rgb(61.78% 42.39% 12.8%);
  --c3: rgb(43.42% 49.22% 10.47%);
  --c4: rgb(16.41% 53.24% 25.54%);
  --c5: rgb(0% 52.88% 46.13%);
  --c6: rgb(0% 51.79% 59.01%);
  --c7: rgb(0% 50.07% 73.51%);
  --c8: rgb(41.25% 44.14% 78.68%);
  --c9: rgb(65.22% 35.59% 66.7%);
  --c10: rgb(75.62% 30.45% 47.57%);
  
  @supports (background: lch(0% 45 282)) {
    --CONSTANTS: 50% 50;
    --c0: lch(var(--CONSTANTS) 0);
    --c1: lch(var(--CONSTANTS) 36);
    --c2: lch(var(--CONSTANTS) 72);
    --c3: lch(var(--CONSTANTS) 108);
    --c4: lch(var(--CONSTANTS) 144);
    --c5: lch(var(--CONSTANTS) 180);
    --c6: lch(var(--CONSTANTS) 216);
    --c7: lch(var(--CONSTANTS) 252);
    --c8: lch(var(--CONSTANTS) 288);
    --c9: lch(var(--CONSTANTS) 324);
    --c10: lch(var(--CONSTANTS) 360);
  }
}

.color-strip-wrapper--hsl {
  .color-strip--hue {
    > li {
      --hue: calc(var(--i) * (360 / 10));
      background: hsl(var(--hue, 0) 50% 45%);
    }
  }
  
  .color-strip--saturation {
    > li {
      --s: calc(var(--i, 0) * 10);
      background: hsl(282 calc(var(--s) * 1%) 45%);
    }
  }
  
  .color-strip--lightness-hsl {
    > li {
      --l: calc(var(--i, 0) * 10);
      background: hsl(282 50% calc(var(--l) * 1%));
    }
  }
}

View Compiled

const button = document.querySelector('[data-toggle]')
const buttonText = document.querySelector('[data-text]')

button.hidden = false

button.addEventListener('click', (e) => {
  if (e.target.checked) {
    document.body.classList.remove('is-grayscale')
    buttonText.innerText = ': Off'
    e.target.checked = false
  } else {
    document.body.classList.add('is-grayscale')
    buttonText.innerText = ': On'
    e.target.checked = true
  }
})

This Pen is owned by Smashing Magazine on CodePen. It is a fork of this Pen.

See more by @smashingmag on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.