Designing an Autogenerated Live Color Scale in CSS

Until fairly recently, there was no way to get an entire color scale live generated based on one color using vanilla CSS.

You could do something like it at build-time using SASS. Or you could do something like it “live” using JavaScript—but purely for demo/one-off purposes.

However, now that we have real CSS functions calculating color math in real-time, we have the ability set a single color in a stylesheet—and everything else will come along for the ride!