qExGJZ

index.html

<div class="trans">
  Black scale:
  <div class="main t1">lightest</div>
  <div class="main t2">lighter</div>
  <div class="main t3">light</div>
  <div class="main t4">normal</div>
  <div class="main t5">dark</div>
  <div class="main t6">darker</div>
  <div class="main t7">darkest</div>
</div>

<div class="greys">
  Grey scale:
  <div class="main g1">lightest</div>
  <div class="main g2">light</div>
  <div class="main g3">normal</div>
  <div class="main g4">dark</div>
  <div class="main g5">darker</div>
  <div class="main g6">darkest</div>
</div>

qExGJZ.markdown

qExGJZ

A Pen by Captain Anonymous on CodePen.

License.

style.css

.main {
  width: 300px
  height: 300px;
  font-size: 70px;
}

.trans {
  float: left;
}

.greys {
  float: left;
  margin-left: 30px;
}

.t1 { color: rgba(0,0,0,0.05) }
.t2 { color: rgba(0,0,0,0.15) }
.t3 { color: rgba(0,0,0,0.3) }
.t4 { color: rgba(0,0,0,0.44) }
.t5 { color: rgba(0,0,0,0.6) }
.t6 { color: rgba(0,0,0,0.8) }
.t7 { color: rgba(0,0,0,0.9) }


.g1 { color: rgb(250, 250, 250)}
.g2 { color: rgb(240, 240, 240)}
.g3 { color: rgb(179, 179, 179)}
.g4 { color: rgb(102, 102, 102)}
.g5 { color: rgb(51, 51, 51)}
.g6 { color: rgb(25, 25, 24)}
}