<div class="box red-hex"></div>
<div class="box red-rgb"></div>
<div class="box red-rgba"></div>
<div class="box green"></div>
<div class="box blue"></div>
<div class="box black"></div>
<div class="box white"></div>
<div class="box magenta"></div>
<div class="box yellow"></div>
body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}

.box {
  height: 100px;
  width: 100%;
  border: 1px solid black;
}

.red-hex {
  background-color: #FF0000;
}

.red-rgb {
  background-color: rgb(255, 0, 0);
}

.red-rgba {
  background-color: rgb(255, 0, 0 ,.5);
}

.green {
  background-color: #00FF00;
}

.blue {
  background-color: #0000FF;
}

.black {
  background-color: #000000;
}

.white {
  background-color: #FFFFFF;
}

.magenta {
  background-color: #FF00FF;
}

.yellow {
  background-color: #FFFF00;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.