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 hidden or 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
| :root { | |
| --hue: 180; | |
| --sat: 50%; | |
| --light: 50%; | |
| --splitter: 30; | |
| --shader: 15%; | |
| --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)); | |
| --satDarker: calc(var(--sat) + var(--shader)); | |
| --satLighter: calc(var(--sat) - var(--shader)); | |
| --lightDarker: calc(var(--light) - var(--shader)); | |
| --lightLighter: calc(var(--light) + var(--shader)); | |
| --mainColor: hsl(var(--hue), var(--sat), var(--light)); | |
| --mainColorDarker: hsl(var(--hue), var(--satDarker), var(--lightDarker)); | |
| --mainColorLighter: hsl(var(--hue), var(--satLighter), var(--lightLighter)); | |
| --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)); | |
| --compColor: hsl(var(--hueComp), var(--sat), var(--light)); | |
| --compColorDarker: hsl(var(--hueComp), var(--satDarker), var(--lightDarker)); | |
| --compColorLighter: hsl(var(--hueComp), var(--satLighter), var(--lightLighter)); | |
| --analgColor1: var(--nextColor); | |
| --analgColor1Darker: var(--nextColorDarker); | |
| --analgColor1Lighter: var(--nextColorLighter); | |
| --analgColor2: var(--prevColor); | |
| --analgColor2Darker: var(--prevColorDarker); | |
| --analgColor2Lighter: var(--prevColorLighter); | |
| --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)); | |
| --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)); | |
| --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.