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!