<h1>Conic Gradients in different color spaces</h1>

<div class="container">

  <div class="item">
    <div class="demo rgb01"></div>
    <p>RGB</p>
  </div>

  <div class="item">
    <div class="demo oklab01"></div>
    <p>OKLAB</p>
  </div>

  <div class="item">
    <div class="demo lch01"></div>
    <p>LCH</p>
  </div>

  <div class="item">
    <div class="demo oklch01"></div>
    <p>OKLCH</p>
  </div>

  <div class="item">
    <div class="demo hsl01"></div>
    <p>HSL</p>
  </div>

  <div class="item">
    <div class="demo hwb01"></div>
    <p>HWB</p>
  </div>
</div>
body {
  font-family: system-ui, sans-serif;
  margin: 0 2em;
}

.container {
  display: flex;
  flex-flow: column;
  justify-content: center;

  margin: 0 auto;
  width: 90vw;
  gap: 5em;
}

h1 {
  margin-bottom: 3rem;
}

/*
Set up the basic dimensions for each box we'll use for the demo
*/
.demo {
  /* setup to align items to center of div*/
  display: flex;
  flex-flow: column;
  width: 600px;
  height: 300px;
}

.item {
  border: 5px solid black;
  margin-bottom: 2rem;
  width: min-content;
}

.item p {
  margin: 1em;
  font-size: 1.5rem;
}

.rgb01 {
  background: conic-gradient(red, orange, yellow, green, blue, indigo, violet);
}

.oklab01 {
  background: conic-gradient(
    in oklab,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

.lch01 {
  background: conic-gradient(
    in lch,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

.oklch01 {
  background: conic-gradient(
    in oklch,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

.hsl01 {
  background: conic-gradient(
    in hsl,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

.hwb01 {
  background: conic-gradient(
    in hwb,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.