CSS color variables

variables.css

:root {
    /* Set initial saturation and lightness values */
    --sat: 50%;
    --light: 50%;

    /* Set amount of light & saturation to change for darker & lighter color variants */
    --shader: 15%;

    /* 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));

    /* Grayscale */ 
    --c-white: #FFF;
    --c-black: #000;
    --c-mineshaft: #333;
    --c-dove-gray: #666;
    --c-dusty-gray: #999;

    /* Primary branding palette (unique) */
    /* Name that color: http://chir.ag/projects/name-that-color/ */
    --c-punch: #DB4726;
    --c-breaker-bay: #5B9B98;
    --c-cornflower-blue: #727FE7;
    --c-sandy-brown: #F1A84A;

    /* Primary branding palette (semantic value) */
    --c-primary-hex: var(--c-punch);
    --c-primary-hue: 11;
    --c-primary-hsl: hsl(var(--c-primary-hue), 72%, 50%);
    --c-secondary-hex: var(--c-breaker-bay);
    --c-secondary-hue: 177;
    --c-secondary-hsl: hsl(var(--c-secondary-hue), 26%, 48%);
    --c-tertiary-hex: var(--c-cornflower-blue);
    --c-tertiary-hue: 233;
    --c-tertiary-hsl: hsl(var(--c-tertiary-hue), 71%, 68%);
    --c-quaternary-hex: var(--c-sandy-brown);
    --c-quaternary-hue: 34;
    --c-quaternary-hsl: hsl(var(--c-quaternary-hue), 86%, 62%);

    /* Primary branding palette - Darken shades */
    --c-primary-darker: hsl(var(--c-primary-hue), var(--satDarker), var(--lightDarker));
    --c-secondary-darker: hsl(var(--c-secondary-hue), var(--satDarker), var(--lightDarker));
    --c-tertiary-darker: hsl(var(--c-tertiary-hue), var(--satDarker), var(--lightDarker));
    --c-quaternary-darker: hsl(var(--c-quaternary-hue), var(--satDarker), var(--lightDarker));

    /* Primary branding palette - Lighten shades */
    --c-primary-lighter: hsl(var(--c-primary-hue), var(--satLighter), var(--lightLighter));
    --c-secondary-lighter: hsl(var(--c-secondary-hue), var(--satLighter), var(--lightLighter));
    --c-tertiary-lighter: hsl(var(--c-tertiary-hue), var(--satLighter), var(--lightLighter));
    --c-quaternary-lighter: hsl(var(--c-quaternary-hue), var(--satLighter), var(--lightLighter));

    /* Other supporting colors */
    --c-seance: #8A1FA1;

    /* Element colors */
    --h1-c: var(--c-primary-hsl);
    --h2-c: var(--c-secondary-hsl);
    // etc.

    /* Forms, inputs, etc. */
    --button-bg-base: var(--c-primary-hsl);
    --button-bg-secondary: var(--c-secondary-hsl);
    --button-bg-tertiary: var(--c-tertiary-hsl);

    --button-c-base: var(--c-white);

    /* Interactive states... */
    --button-bg-base-hover: var(--c-primary-darker);
    --button-bg-secondary-hover: var(--c-secondary-darker);

    /* etc. */
}