Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Variables For Color Manipulation
/* ----
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));
}
@Ellaji

This comment has been minimized.

Copy link

Ellaji commented Dec 4, 2018

Tried this in IE11, but calc is not working inside hsl.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.