💡 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/ */High contrast:
(--base) set to #000 - filtered to calculate a fully inverted color for contrast, i.e. night mode or day mode
html{background:var(--base);filter:invert(100%);} /* dark background FOLLOWED BY filter */
body{color:var(--base);} /* light text */
aside{border:1px solid var(--base);} /* light border */
Complementary colors:
(--base) set to keyword green - filtered to calculate a fully inverted color to complement the base color
html{background:var(--base);filter:invert(100%);} /* green background FOLLOWED BY filter */
body{color:var(--base);} /* red text */
aside{border:1px solid var(--base);} /* red border */
Dual Tone scheme:
(--base) set to a bright blue ocean image (public domain image from U.S. Fish and Wildlife Service) - filtered to calculate a desaturated color
html{background:var(--base);filter:grayscale(30%);} /* bright blue background FOLLOWED BY filter */
body{color:var(--base);filter:brightness(105%);} /* dark blue-gray text FOLLOWED BY filter */
aside{background:var(--base);} /* light blue-gray background (border attribute does not accept images, background does) */
Tint and Shade scheme:
(--base) set to #797 - filtered to calculate lighter (brightness greater than 100%) or darker (brightness less than 100%) colors to contrast the midtone base color
html{background:var(--base);filter:brightness(150%);} /* midtone gray-green background FOLLOWED BY filter */
body{color:var(--base);} /* light sage text */
aside{border:1px solid var(--base);} /* light sage border */
Analogous Colors:
(--base) set to keyword #808 - filtered to calculate neighboring hues
html{background:var(--base);filter:hue-rotate(-52deg);} /* purple background FOLLOWED BY filter */
body{color:var(--base);} /* blue text */
aside{border:1px solid var(--base);} /* blue border */
p{filter:hue-rotate(-104deg);border:1px solid var(--base);} /* green border PRECEEDED BY filter */
Triadic Colors:
(--base) set to #FF8 - filtered to calculate 3 colors evenly spaced on the color wheel
html{background:var(--base);filter:hue-rotate(120deg);} /* pale yellow background FOLLOWED BY filter */
body{color:var(--base);} /* pale blue text */
aside{border:1px solid var(--base);} /* pale blue border */
p{filter:hue-rotate(-240deg);border:1px solid var(--base);} /* pinkish-lavender border PRECEEDED BY filter */