QuickStart: Color

Tools for managing colors and palettes.

• 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][Herman]

Import

If you already imported accoutrement/sass/tools you are ready to go. If you want to import individual plugins, make sure you first import the shared core:

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

If you’re using Eyeglass, you can leave off most of the path:

  @import 'accoutrement/core';
  @import 'accoutrement/plugin/color';

Color Palette

Establish your color palette, with the standard Accoutrement syntax:

$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, using color functions
  'link': '#brand-pink' ('shade': 25%, 'desaturate': 15%),
);

Then access your colors from anywhere:

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

Multiple Palettes

You can also define your colors in smaller maps, and then add them to the global $colors variable using the add-colors() mixin. Map-references using the #tag format will work across maps, once they are both added to the global setting.

 $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%),
 );

 // merge everything into the main $colors map…
 @include add-colors($brand, $patterns);

WCAG Contrast

We’ll also help you calculate WCAG-appropriate color contrasts. We default to white and black options, but you can also set 'contrast-light' and 'contrast-dark' keys in your palette (with or without a private _ prefix), or pass in options.

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

  // or return a contrasting color from a set of options…
  border-color: contrast('background', white, rebeccapurple);
}