Try it Yourself: Colors HSL

Colors HSL

<!DOCTYPE html>
<html>
<head>
<style>
.swatch-light {
  background-color: hsl(210, 70%, 80%);
}

.swatch-mid {
  background-color: hsl(210, 70%, 50%);
}

.swatch-dark {
  background-color: hsl(210, 70%, 25%);
}
</style>
</head>
<body>

<div class="swatch-light">Light</div>
<div class="swatch-mid">Mid</div>
<div class="swatch-dark">Dark</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.swatch-light {
  background-color: hsl(210, 70%, 80%);
}

.swatch-mid {
  background-color: hsl(210, 70%, 50%);
}

.swatch-dark {
  background-color: hsl(210, 70%, 25%);
}
</style>
</head>
<body>

<div class="swatch-light">Light</div>
<div class="swatch-mid">Mid</div>
<div class="swatch-dark">Dark</div>

</body>
</html>