There is a thing called Atomic CSS. You use shorthand to apply styles directly in HTML. An example from their docs:

<div class="Bgc(#0280ae.5) C(#fff) P(20px)">
    Lorem ipsum

That will apply these classes:

.P\(20px\) {
  padding: 20px;
.C\(\#fff\) {
  color: #fff;
.Bgc\(\#0280ae\.5\) {
  background-color: rgba(2,128,174,.5);

But where do those classes come from? Does CSS get loaded that loads all possible combinations of numbers and colors? That's apparently what Atomizer is for. It's a preprocessor of shorts, but I'm afraid one we don't offer right now on CodePen.

Pankaj Parashar created a Chrome/Opera Extension to make it work. Here's a GIF from that repo's README:

Pretty cool example of implementing a feature by taking matters into your own hands! It's open source, so that might give y'all a head start if you've ever wanted to do something similar.