<div class="container bg-red">
  <p class="txt-yellow">Howdy world!</p>
</div>

<div class="container bg-yellow">
  <p class="txt-blue">Howdy world!</p>
</div>

<div class="container bg-blue">
  <p class="txt-green">Howdy world!</p>
</div>

<div class="container bg-green">
  <p class="txt-red">Howdy world!</p>
</div>
body {
  filter: grayscale( 100% );
}

.container {
  padding: 10px;
  text-align: center;
}

.bg-red {
  background-color: red;
}
.bg-yellow {
  background-color: yellow;
}
.bg-blue {
  background-color: blue;
}
.bg-green {
  background-color: green;
}

.txt-red {
  color: red;
}
.txt-yellow {
  color: yellow;
}
.txt-blue {
  color: blue;
}
.txt-green {
 color: green;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.