<div class="hsl-wrapper">
  <div class="hsl"></div>
  <div class="dot-wrapper">
    <div class="dot">
      <p class="dot-text">210 deg</p>
    </div>
  </div>
</div>

<div class="saturation-wrapper">
  <div class="divider">
    <span>68%</span>
  </div>
</div>

<div class="lightness-wrapper">
  <div class="divider">
    <span>80%</span>
  </div>
</div>
html {
  --wrapper-margin: 20px;
  --target-color-hue: 210deg;
  --target-color-saturation: 68%;
  --target-color-lightness: 80%;
  --width: 200px;
}
.hsl-wrapper {
  margin: var(--wrapper-margin);
  position: relative;
  --dot-color: darkorange;
  font-weight: bold;
  font-size: 1.3rem;
  --height: 200px;
  --border-radius: 50%;
  .hsl {
    width: var(--width);
    height: var(--height);
    border-radius: var(--border-radius);
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  }
  .dot-wrapper {
    position: absolute;
    width: var(--width);
    height: var(--height);
    top: 0;
    transform-origin: center;
    transform: rotate(var(--target-color-hue));
  }
  .dot {
    margin: auto;
    width: 20px;
    height: 20px;
    background: var(--dot-color);
    border-radius: var(--border-radius);
    position: relative;
    .dot-text {
      position: absolute;
      width: max-content;
      top: 5px;
      left: 8px;
      transform: translateX(-50%);
      color: var(--dot-color);
    }
  }
}

.saturation-wrapper {
  margin: var(--wrapper-margin);
  width: var(--width);
  height: 20px;
  background-image: linear-gradient(
    to right,
    hsl(var(--target-color-hue), 0%, var(--target-color-lightness)),
    hsl(var(--target-color-hue), 50%, var(--target-color-lightness)),
    hsl(var(--target-color-hue), 100%, var(--target-color-lightness))
  );
  .divider {
    outline: solid;
    margin-left: 68%;
    height: 100%;
    width: 1px;
    position: relative;
    span {
      position: absolute;
      transform: translate(-35%, 100%);
      bottom: 0;
    }
  }
}

.lightness-wrapper {
  margin: var(--wrapper-margin);
  width: var(--width);
  height: 20px;
  background-image: linear-gradient(
    to right,
    hsl(var(--target-color-hue), var(--target-color-saturation), 0%),
    hsl(var(--target-color-hue), var(--target-color-saturation), 50%),
    hsl(var(--target-color-hue), var(--target-color-saturation), 100%)
  );
  .divider {
    outline: solid;
    margin-left: 80%;
    height: 100%;
    width: 1px;
    position: relative;
    span {
      position: absolute;
      transform: translate(-35%, 100%);
      bottom: 0;
    }
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.