Classical Drawing Value Scale

classical-drawing-value-scale.markdown

Classical Drawing Value Scale

A Pen by Chris Tsongas on CodePen.

License.

index.html

<div class="container"><div class="one"></div><div class="two"></div><div class="three"></div><div class="four"></div><div class="five"></div><div class="six"></div><div class="seven"></div></div>

style.css

div {
  display: inline-block;
  width: 77.143px;
  height: 77.143px;
  margin: 0;
}
.container {
  display: block;
  width: 540px;
  margin: 50px;
  border: 1px solid #000;  
}
.one {
  background-color: hsl(0, 0%, 100%);
}
.two {
  background-color: hsl(0, 0%, 83.3333%);
}
.three {
  background-color: hsl(0, 0%, 66.6667%);
}
.four {
  background-color: hsl(0, 0%, 50%);
}
.five {
  background-color: hsl(0, 0%, 33.3333%);
}
.six {
  background-color: hsl(0, 0%, 16.6667%);
}
.seven {
  background-color: hsl(0, 0%, 0%);
}