Dealing with hex colors

At Tefter we are a small team of two, mainly backend developers. Our good friend built the design of our service and a few months later we ended up with various hex colors here and there without knowing which one to choose for the next element. Of course, we have Sass so we started grouping our colors in variables.

We decided to name our codes using Colorhexa. We extracted all colors in a file named themes.scss, like this:

$cyan: #5fbec9;
// etc
// etc

When we found more than one color with the same name we took the approach of adding an inc number suffix without special order or hierarchy.

$very-dark-grey: #474747;
$very-dark-grey2: #666666;

After a couple of hours, we ended up with a list of our colors. First of all, we got a better understanding of our color palette. We found some colors that did not fit in our design, for example, we had a vivid blue somewhere in an input focus. From all 77 color variations, the most used are variations of grey and we took the opportunity to reduce some of them.

The next step was to start working on theming our product. We took a very simple approach. We had the named color variations and we wanted to associate the main components with these colors. So we used a hash map like this:

$colors: (
  // General
  h2: $very-dark-grey,
  h3: $very-dark-grey,
  background: $mostly-white,
  p: $very-dark-grey,
  hr: $light-greyish-blue3,

  // This is the default link color
  link: $black,
  link-before: $very-dark-grey,
  link-hover: $very-dark-grey,
  link-span: $dark-grey3,

  // Secondary link element
  secondary-link: $dark-grey,
  secondary-link-hover: $very-dark-grey,
  ...
  ...
  ...

We took a simple approach of converting these colors to css variables and providing a simple function to get the right color for each component using the prefers-colors-scheme. We decided to do this in order to prepare for dark mode theme in the near future. So in the same themes.scss file we added the following two functions:

// Converts scss variable into css variable
:root {
  @each $name, $color in $colors{
    --color-#{$name} : #{$color};
  }
  --theme: 'light';
}

// Creates a function to get color instead of using css varible
@function getColor($color-name){
  @return var(--color-#{$color-name});
}

And all we had to do is for each element that we have in our $colors map to associate it with the corresponding color. For example,

body {
  background: getColor(background);
  ...
  ...
}

Note that we did this only for the main components that have meaning to be part of the theme. This is not always straightforward and we did some back and forths in order to have a balance and a smaller color map to handle.

Conclusions

I am not a front-end developer and this was my first try of such CSS refactoring. In the end, we have all our colors in one file, we could start playing with different variations and provide different themes or working on dark theme easier and we could decide immediately which color to experiment with for our next component.

Maybe in larger codebases, this process will be endless but in smaller ones, it seems to work just fine!