Overlays three side-by-side translucent rectangles in HTML that can be colored differently with CSS to visualize how those colors appear once overlayed.

notes.md

Simple code to that overlays three side-by-side translucent rectangles that can be colored differently to visualize how those colors appear once overlayed.

To use, change the background-color attributes for each of the color1, color2, color3 CSS selectors in style.css.

JS Fiddle: https://jsfiddle.net/rdutL86g/

Color resources:

• https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
• https://wismuth.com/webcolors.html

style.css

.rect {
    height: 100px;
    width: 100px;
    position: absolute;
}
.middle {
  width: 150px;
  margin-left: 50px;
  z-index: 1;
}
.right {
  margin-left: 150px;
  z-index: 2;
}
.translucent {
  opacity: 0.5;
}
.bottom {
  margin-top: 50px;
  width: 250px;
}
.color1 {
  background-color: blue;
}
.color2 {
  background-color: magenta;
}
.color3 {
   background-color: dodgerblue;
}

template.html

<div class="rect translucent color1">

</div>
<div class="rect middle translucent color2">

</div>
<div class="rect right translucent color1">

</div>
<!-- <div class="rect bottom translucent color3">

</div> -->