💡 Avoid using the exact color schemes here, since these are only meant to show how auto-calculated color schemes work in principle and look ugly and garish as a result. Use the basic concepts from here, but make sure the code and initial color has been changed enough to make your final result a whole lot better than these examples.
The main purpose in setting up stylesheets to auto-calculate color schemes is to make stylesheets that allow for easier user customization. I do not recommend using this method for sites or apps that will not be user customized; such sites and apps should be styled the old way, where the Designer creates a specific color scheme to use.
Define var()
:root{--base:url(https://picsum.photos/1920/1080);} /* Lorem Picsum @ https://picsum.photos/ */