Last active
June 14, 2022 06:44
-
-
Save softpunch/7d56fc6ec3348fa2f69a8e0d5f6793d4 to your computer and use it in GitHub Desktop.
CSS Variables For Color Manipulation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ---- | |
css custom properties to manipulate color | |
MIT - 2017 - Soft Punch | |
https://gist.github.com/softpunch/ | |
set initial "main" color via HSL values. | |
automatically calculate harmonies and variations of that color with pure css. | |
harmonies are determined solely by hue. | |
lighter and darker variations are determined by adjusting saturation and lightness. | |
useful information about HSL/HSB lighter and darker variations: | |
https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e | |
in this stylesheet, css variables are declared with the :root selector, | |
which should make them available inside all subsequent css selector blocks. | |
however, if the variables are likely to be modified by javascript, | |
it may be easier to access them in a script if they're declared with the body selector instead. | |
if a browser does not support var(), it will simply ignore the declaration. | |
fallbacks can be placed before or within variables. | |
more information about css variables: | |
https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/ | |
https://madebymike.com.au/writing/using-css-variables/ | |
browser support: | |
http://caniuse.com/#feat=css-variables | |
to use the colors defined by these variables elsewhere in a stylesheet, | |
reference them by name, inside of var(). | |
examples: | |
set the background of the body of a web page with a darker variation of the main color | |
body { | |
background: var(--mainColorDarker); | |
} | |
set the background of a div with a lighter variation of a complementary color | |
.div { | |
background: var(--compColorLighter); | |
} | |
interactive demo: | |
https://jsfiddle.net/softpunch/Lw38fxzz/show/light/ | |
demo source: | |
https://jsfiddle.net/softpunch/Lw38fxzz/ | |
---- */ | |
:root { | |
/* set initial (main) HSL color values to use */ | |
--hue: 180; | |
--sat: 50%; | |
--light: 50%; | |
/* set degree of separation between two split complementary colors */ | |
--splitter: 30; | |
/* set amount of light & saturation to change for darker & lighter color variants */ | |
--shader: 15%; | |
/* calculate hue values for each color manipulation */ | |
--hueNext: calc(var(--hue) + 30); | |
--huePrev: calc(var(--hue) - 30); | |
--hueComp: calc(var(--hue) + 180); | |
--hueTriad1: calc(var(--hue) + 120); | |
--hueTriad2: calc(var(--hue) + 120 + 120); | |
--hueTet1: calc(var(--hue) + 90); | |
--hueTet2: calc(var(--hue) + 90 + 90); | |
--hueTet3: calc(var(--hue) + 90 + 90 + 90); | |
--hueSplitComp1: calc(var(--hueComp) + var(--splitter)); | |
--hueSplitComp2: calc(var(--hueComp) - var(--splitter)); | |
/* calculate saturation values for lighter & darker color variations */ | |
--satDarker: calc(var(--sat) + var(--shader)); | |
--satLighter: calc(var(--sat) - var(--shader)); | |
/* calculate light values for lighter & darker color variations */ | |
--lightDarker: calc(var(--light) - var(--shader)); | |
--lightLighter: calc(var(--light) + var(--shader)); | |
/* calculate main color and its lighter & darker variations */ | |
--mainColor: hsl(var(--hue), var(--sat), var(--light)); | |
--mainColorDarker: hsl(var(--hue), var(--satDarker), var(--lightDarker)); | |
--mainColorLighter: hsl(var(--hue), var(--satLighter), var(--lightLighter)); | |
/* calculate adjacent colors and their lighter & darker variations */ | |
--nextColor: hsl(var(--hueNext), var(--sat), var(--light)); | |
--nextColorDarker: hsl(var(--hueNext), var(--satDarker), var(--lightDarker)); | |
--nextColorLighter: hsl(var(--hueNext), var(--satLighter), var(--lightLighter)); | |
--prevColor: hsl(var(--huePrev), var(--sat), var(--light)); | |
--prevColorDarker: hsl(var(--huePrev), var(--satDarker), var(--lightDarker)); | |
--prevColorLighter: hsl(var(--huePrev), var(--satLighter), var(--lightLighter)); | |
/* calculate complementary color and its lighter & darker variations */ | |
--compColor: hsl(var(--hueComp), var(--sat), var(--light)); | |
--compColorDarker: hsl(var(--hueComp), var(--satDarker), var(--lightDarker)); | |
--compColorLighter: hsl(var(--hueComp), var(--satLighter), var(--lightLighter)); | |
/* calculate analagous colors (1 & 2) and their lighter & darker variations */ | |
--analgColor1: var(--nextColor); | |
--analgColor1Darker: var(--nextColorDarker); | |
--analgColor1Lighter: var(--nextColorLighter); | |
--analgColor2: var(--prevColor); | |
--analgColor2Darker: var(--prevColorDarker); | |
--analgColor2Lighter: var(--prevColorLighter); | |
/* calculate triadic color harmonies (1 & 2) and their lighter & darker variations */ | |
--triadColor1: hsl(var(--hueTriad1), var(--sat), var(--light)); | |
--triadColor1Darker: hsl(var(--hueTriad1), var(--satDarker), var(--lightDarker)); | |
--triadColor1Lighter: hsl(var(--hueTriad1), var(--satLighter), var(--lightLighter)); | |
--triadColor2: hsl(var(--hueTriad2), var(--sat), var(--light)); | |
--triadColor2Darker: hsl(var(--hueTriad2), var(--satDarker), var(--lightDarker)); | |
--triadColor2Lighter: hsl(var(--hueTriad2), var(--satLighter), var(--lightLighter)); | |
/* calculate tetradic color harmonies (1-3) and their lighter & darker variations */ | |
--tetColor1: hsl(var(--hueTet1), var(--sat), var(--light)); | |
--tetColor1Darker: hsl(var(--hueTet1), var(--satDarker), var(--lightDarker)); | |
--tetColor1Lighter: hsl(var(--hueTet1), var(--satLighter), var(--lightLighter)); | |
--tetColor2: hsl(var(--hueTet2), var(--sat), var(--light)); | |
--tetColor2Darker: hsl(var(--hueTet2), var(--satDarker), var(--lightDarker)); | |
--tetColor2Lighter: hsl(var(--hueTet2), var(--satLighter), var(--lightLighter)); | |
--tetColor3: hsl(var(--hueTet3), var(--sat), var(--light)); | |
--tetColor3Darker: hsl(var(--hueTet3), var(--satDarker), var(--lightDarker)); | |
--tetColor3Lighter: hsl(var(--hueTet3), var(--satLighter), var(--lightLighter)); | |
/* calculate split complementary colors (1 & 2) and their lighter & darker variations */ | |
--splitCompColor1: hsl(var(--hueSplitComp1), var(--sat), var(--light)); | |
--splitCompColor1Darker: hsl(var(--hueSplitComp1), var(--satDarker), var(--lightDarker)); | |
--splitCompColor1Lighter: hsl(var(--hueSplitComp1), var(--satLighter), var(--lightLighter)); | |
--splitCompColor2: hsl(var(--hueSplitComp2), var(--sat), var(--light)); | |
--splitCompColor2Darker: hsl(var(--hueSplitComp2), var(--satDarker), var(--lightDarker)); | |
--splitCompColor2Lighter: hsl(var(--hueSplitComp2), var(--satLighter), var(--lightLighter)); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Tried this in IE11, but calc is not working inside hsl.