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);
Related
@mixin add-colors()
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);
}