These functions use one or two 'base' colors to automatically generate a color range similar to Material Design's color ranges. Useful to quickly get different shades of your primary brand color or accent color, or to generate a set of neutrals between hand-selected light and dark colors.
$greens: make-shades(#cc99cc);
// (
// 100: #eeddee,
// 200: #ddbbdd,
// 300: #cc99cc,
// 400: #bb77bb,
// 500: #aa55aa,
// 600: #884488,
// 700: #663366,
// 800: #442244,
// 900: #221122
// )
$grays: make-shades(#0a0a22, #f0f000);
// (
// 100: #ddeedd,
// 200: #bbddbb,
// 300: #99cc99,
// 400: #80aa8b,
// 500: #66887d,
// 600: #4d666f,
// 700: #334460,
// 800: #1a2252,
// 900: #000044
// )
$gray2: make-shades(#f0f000, #0a0a22);
// (
// 100: #ddeedd,
// 200: #bbddbb,
// 300: #99cc99,
// 400: #80aa8b,
// 500: #66887d,
// 600: #4d666f,
// 700: #334460,
// 800: #1a2252,
// 900: #000044
// )
Notice that order doesn't matter when passing two colors.
I usually use it like this:
$palette: (
primary: make-shades($cc99cc),
accent: make-shades($cccc99),
gray: make-shades(#fff4ff, #000044),
);
@function palette-color($name, $level: 500) {
@return map-get(map-get($palette, $name), $level);
}
a {
color: palette-color(primary, 700);
&:hover {
palette-color(primary);
}
}
You can also of course use the output of one invocation to feed another; for example, I'll often use the 900 value of my accent color with white to generate the gray range, which has the result of slightly tinting the grays toward the accent color.