Skip to content

Instantly share code, notes, and snippets.

Last active June 14, 2022 06:44
Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save softpunch/7d56fc6ec3348fa2f69a8e0d5f6793d4 to your computer and use it in GitHub Desktop.
Save softpunch/7d56fc6ec3348fa2f69a8e0d5f6793d4 to your computer and use it in GitHub Desktop.
CSS Variables For Color Manipulation
/* ----
css custom properties to manipulate color
MIT - 2017 - Soft Punch
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:
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:
browser support:
to use the colors defined by these variables elsewhere in a stylesheet,
reference them by name, inside of var().
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:
demo source:
---- */
: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));
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