DEV Community

loading...

Creating a CSS color palette from Sass variables

keith hayden
Frontend Dev : CSS Geek : Creating things in Javascript/Typescript/React and HTML : NY transplant from NJ : dad jokes aficionado : former grocery store bagging champion
Updated on ・2 min read

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.

screenshot of color palette

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,
        ),
);
Enter fullscreen mode Exit fullscreen mode

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};
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)