Nocturnal Practitioners of Magic


    2.3.1 • Public • Published


    Sass color-palette management by OddBird

    • Organize all your colors into a single map, or set of maps
    • Document color relationships directly in the code
    • Automate WCAG-appropriate contrast checking
    • Generate color-palette documentation with Herman

    OddBird's Accoutrement toolkits are designed around the idea that code should be meaningful to both humans and machines – opening the door for automation, while improving or maintaining readability. These tools integrate with Herman, our automated living pattern-library generator built on SassDoc.

    Other Accoutrement include…

    • Init provides lightweight browser-normalization.
    • Scale helps manage scale patterns like font-sizes, margins, and gutters.
    • Type provides webfont management tools, and other typography helpers.
    • Layout provides layout utilities such as box-sizing, intrinsic ratios, z-index management, named media-queries, and a clearfix.

    Quick Start: Colors

    Install the package with npm or yarn:

    npm install accoutrement-color
    yarn add accoutrement-color

    Import the library:

    @import '<path-to>/accoutrement-color/sass/color';

    Establish your color palette:

    $colors: (
      // set explicit colors
      'brand-pink'hsl(330, 85%, 62%),
      // reference existing colors
      // make adjustments as needed, using color functions
      'link''brand-pink' ('shade': 25%'desaturate': 15%),

    Access your colors from anywhere:

    .example {
      border-color: color('border');

    You can also define your colors in smaller maps, and then add them to the global $colors variable using the merge-color() function, or add-colors() mixin.

    $brand: (
      'brand-pink'hsl(330, 85%, 62%),
    $patterns: (
      'link''brand-pink' ('shade': 25%),
    // merge everything into the main $colors map… 
    @include add-colors($brand, $patterns);

    We'll also help you calculate WCAG-appropriate color contrasts:

    a:hover {
      // set a background, and get well-contrasted text 
      @include contrasted('link');
      // or return a contrasting color for use anywhere… 
      border-color: contrast('background');


    npm i accoutrement-color

    DownloadsWeekly Downloads






    Unpacked Size

    685 kB

    Total Files


    Last publish


    • jgerigmeyer
    • mirisuzanne