CodePen Embed - HSL Grayscale

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

body {
  display: flex;
  height: 100vh;
  margin: 0;
}
div {
  flex: 1;
}
div:nth-child(1) {
  background: hsl(0 0% 0%);
}
div:nth-child(1) {
  background: hsl(0 0% 10%);
}
div:nth-child(2) {
  background: hsl(0 0% 20%);
}
div:nth-child(3) {
  background: hsl(0 0% 30%);
}
div:nth-child(4) {
  background: hsl(0 0% 40%);
}
div:nth-child(5) {
  background: hsl(0 0% 50%);
}
div:nth-child(6) {
  background: hsl(0 0% 60%);
}
div:nth-child(7) {
  background: hsl(0 0% 70%);
}
div:nth-child(8) {
  background: hsl(0 0% 80%);
}
div:nth-child(9) {
  background: hsl(0 0% 90%);
}
div:nth-child(10) {
  background: hsl(0 0% 100%);
}

This Pen is owned by Chris Coyier on CodePen.

See more by @chriscoyier on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.