<h1>HSL Test</h1>
<div>
  <h2>同トーン1</h2>
  <div class="box hsl-0-80-70">
    hsl(0, 80%, 70%)
  </div>
  <div class="box hsl-120-80-70">
    hsl(120, 80%, 70%)
  </div>
  <div class="box hsl-240-80-70">
    hsl(240, 80%, 70%)
  </div>
</div>
<div>
  <h2>同トーン2</h2>
  <div class="box hsl-30-30-40">
    hsl(30, 30%, 40%)
  </div>
  <div class="box hsl-150-30-40">
    hsl(150, 30%, 40%)
  </div>
  <div class="box hsl-270-30-40">
    hsl(270, 30%, 40%)
  </div>
</div>

<div>
  <h2>同系色(change L)</h2>
  <div class="box hsl-0-90-90">
    hsl(0, 90%, 90%)
  </div>
  <div class="box hsl-0-90-60">
    hsl(0, 90%, 60%)
  </div>
  <div class="box hsl-0-90-30">
    hsl(0, 90%, 30%)
  </div>
</div>

<div>
  <h2>同系色(change S)</h2>
  <div class="box hsl-0-90-60">
    hsl(0, 90%, 60%)
  </div>
  <div class="box hsl-0-60-60">
    hsl(0, 60%, 60%)
  </div>
  <div class="box hsl-0-30-60">
    hsl(0, 30%, 60%)
  </div>
</div>
.box {
  display: inline-block;
  width: 8rem;
  height: 8rem;
  border: 1px solid #333;
  
  font-size: 0.8rem;
}

.hsl-0-80-70 {
  background-color: hsl(0, 80%, 70%);
}
.hsl-120-80-70 {
  background-color: hsl(120, 80%, 70%);
}
.hsl-240-80-70 {
  background-color: hsl(240, 80%, 70%);
}

.hsl-30-30-40 {
  background-color: hsl(30, 30%, 40%);
}
.hsl-150-30-40 {
  background-color: hsl(150, 30%, 40%);
}
.hsl-270-30-40 {
  background-color: hsl(270, 30%, 40%);
}

.hsl-0-90-90 {
  background-color: hsl(0, 90%, 90%);
}
.hsl-0-90-60 {
  background-color: hsl(0, 90%, 60%);
}
.hsl-0-90-30 {
  background-color: hsl(0, 90%, 30%);
}

.hsl-0-90-60 {
  background-color: hsl(0, 90%, 60%);
}
.hsl-0-60-60 {
  background-color: hsl(0, 60%, 60%);
}
.hsl-0-30-60 {
  background-color: hsl(0, 30%, 60%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.