Creating a CSS color palette from Sass variables

Does your project use a defined color palette? Maybe it comes from a design system or maybe it's just a list of random colors that you use a lot. As someone who's worked on a lot of projects, some small, some big, and some very large, I find that having a defined set of colors can help keep things organized.

Most recently I work on a platform that hosts hundreds of sites that all use the same basic palette. This palette was created by our awesome UX team as part of our design system and it includes different shades of many colors. The most often used ones being in the gray (grey) palette. Together we analyzed all the colors used in our codebase and saw how many different shades were used. UX came up with this palette and it's worked beautifully.

In engineering, we took the defined palette and created it as a sass map object like this:

$palettes: (
        red: (
                600: #c6002b,
                500: #cd212e,
                400: #e22c3a,
                300: #f4747c,
                200: #f79096,
                100: #f4adb1,
        ),
        blue: (
                600: #0055b7,
                500: #509da7,
                400: #30bac6,
                300: #68c8d5,
                200: #84dae5,
                100: #a3e2eb,
        ),
        grey: (
                600: #27292d,
                500: #3f4447,
                400: #717277,
                300: #a9afb2,
                200: #e6eaed,
                100: #f6f8f9,
        ),
);

Originally, we would use a sass function that did a deep-get into the map to find the right color by passing it the color name and number. After a review of this tactic we realized this was hard to maintain and didn't work well with our theming initiative. So we went and replaced all the function calls to use CSS custom properties. After some experimenting we found the best way to create this palette as CSS props was to loop over the map and dump the results into :root{}

:root {
    @each $colorname, $palette in $palettes {
        @each $key, $value in $palette {
            $keyname: "--palette-" + $colorname + "-" + $key;
            #{$keyname}: #{$value};
        }
    }
}

which ends up giving us this:

:root {
  --palette-red-600: #c6002b;
  --palette-red-500: #cd212e;
  --palette-red-400: #e22c3a;
  --palette-red-300: #f4747c;
  --palette-red-200: #f79096;
  --palette-red-100: #f4adb1;
  --palette-blue-600: #0055b7;
  --palette-blue-500: #509da7;
  --palette-blue-400: #30bac6;
  --palette-blue-300: #68c8d5;
  --palette-blue-200: #84dae5;
  --palette-blue-100: #a3e2eb;
  --palette-grey-600: #27292d;
  --palette-grey-500: #3f4447;
  --palette-grey-400: #717277;
  --palette-grey-300: #a9afb2;
  --palette-grey-200: #e6eaed;
  --palette-grey-100: #f6f8f9;
}

We then use them anywhere we need to using the CSS var function like this: background-color: var(--palette-grey-100);.

Here's a handy codepen to see it in action.
Thanks for stopping by.