Skip to content

Instantly share code, notes, and snippets.

View SheilaRT's full-sized avatar
🏠
Working from home

Sheila SheilaRT

🏠
Working from home
View GitHub Profile

Keybase proof

I hereby claim:

  • I am sheilart on github.
  • I am sheilart (https://keybase.io/sheilart) on keybase.
  • I have a public key ASBzP4Gn5L_m7uuGhw1HS1r-ndZb4Z2IAsF1Ze9D28oEQwo

To claim this, I am signing this object:

@SheilaRT
SheilaRT / Basic calculated color schemes in CSS.md
Last active August 29, 2019 01:19
Auto-calculated CSS color schemes

💡 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.

Required for all auto-calculated schemes

Define var()

:root{--base:url(https://picsum.photos/1920/1080);} /* Lorem Picsum @ https://picsum.photos/ */