Accoutrement-Color

Sass color Accoutrement by OddBird. Gather all your colors into a single map, access them by name, and check for WCAG-appropriate contrast.

Quick Start

npm install 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%),
  'brand-light': #ddf,
  'brand-dark': #224,

  // reference existing colors
  'background': 'brand-light',
  'border': 'brand-dark',

  // make adjustments as needed
  'link': 'brand-pink' ('shade': 25%),
);

Access your colors from anywhere:

.example {
  // call any color
  border-color: color('border');

  // adjust on the fly
  text: color('brand-pink' ('saturate': -15%));
}

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%),
  'brand-light': #ddf,
  'brand-dark': #224,
);

$patterns: (
  'background': 'brand-light',
  'border': 'brand-dark',
  'link': 'brand-pink' ('shade': 25%),
);

// use the function to return a single map:
$colors: merge-colors($brand, $patterns);

// or use the mixin to add everything to $colors automatically:
@include add-colors($brand, $patterns);

We'll even help you calculate WCAG-appropriate color contrasts (this feature requires a pow() function like the one available in MathSass.

a:hover {
  // set a background, and get well-contrasted text
  @include contrasted('link');
}