Manage colors quickly and easily across teams and personnel

_colors.scss

// A module to easy-ify your color-naming conventions across teams,
// i.e. no more variable soup: $brand, $grey-light, $border-active, $blue, $button_hover, etc etc
// Declaring colors with a SASS function remains declaring colors: setcolor(), much easier to understand!
//
// Let's begin with a small tweak to a couple of SASS's built-in color functions,
// as there is a more nuanced process to lighten and darken colors,
// courtesy of: http://sassmeister.com/gist/d1b14280c6160f91f295
@function lighten-new($color, $amount: 0%) {
    @if $amount == 0 {$amount: 0%;}
    @return lighten($color, ($amount/100%) * (100% - lightness($color)));
}

@function darken-new($color, $amount: 0%) {
    @if $amount == 0 {$amount: 0%;}
    @return darken($color, ($amount/100%) * (lightness($color)));
}

// How about some color variables: centralized, findable, changeable, simple and limited, extendable, typically defined by higher-ups!
$green: rgb(112, 142, 78);
$red: rgb(222, 100, 97);
$teal: rgb(40, 130, 134);
// etc, etc

// The heart of the matter, SASS maps to the rescue wherein your org's color palette can be extended and managed,
// courtesy of: http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
$colors: (
    green: (
        base: $green,
        dark: darken-new($green, 25%),
        darker: darken-new($green, 33%),
        light: lighten-new($green, 10%),
        lighter: lighten-new($green, 25%),
        // N.B. All the built-in SASS color functions are also available here:
        greener: saturate($green, 33%)
    ),
    red: (
        base: $red,
        dark: darken-new($red, 25%),
        darker: darken-new($red, 33%),
        light: lighten-new($red, 10%),
        lighter: lighten-new($red, 25%)
    ),
    teal: (
        base: $teal,
        dark: darken-new($teal, 25%),
        darker: darken-new($teal, 33%),
        light: lighten-new($teal, 10%),
        lighter: lighten-new($teal, 25%)
    ),
);

// And our final function, where-in everythings falls into place to be used:
@function setcolor($color, $tone: base) {
    @return map-get(map-get($colors, $color), $tone);
}

// Usage

// First our SASS:
// .element {
//    color: setcolor(green);
//    background-color: rgba(setcolor(teal), .85);
//    border: 1px solid setcolor(green, dark);
// }

// Which then outputs:
// .element {
//     color: #ab906b;
//     background-color: rgba(40, 130, 134, .85);
//     border: 1px solid #ecdac3;
// }