Henrique Alves
Henrique Alves@healves82

Aug 24, 2016

Naming color variables

It’s always the same novel. We start a project with one color.

Note: I’m using class names as example to make it more generic but it could be variables as well

/* colors.css */
.grey {
  color: #eee;
}

Then one color become two or more.

/* colors.css */
.grey {
  color: #eee;
}

.grey-light {
  color: #f5f5f5;
}

.grey-darker {
  color: #9E9E9E;
}

Not a problem right? Well, now we need to add a fourth color something between light and darker. It’s time to scratch your head and think about a good name because:

Naming is hard

We found a name grey-semi. How about someone else looking at it without knowing the context? They will be like “Wuuuut!? grey-semi!?” What if we have more six colors?

Ain't nobody got time for that

Numbers for the rescue!

Numeric values

When possible I like to use the same font-weight numeric values. Pick a number from 100 to 900. Material design color palette does the same.

The primary color value starts at 400 or 500. Lighter colors could start at 200 and darker at 700. The idea is to have room to add colors in between but there is no rule.

/* colors.css */
.grey,
.grey-400 {
  color: #eee;
}

.grey-200 {
  color: #f5f5f5;
}

.grey-700 {
  color: #9E9E9E;
}

It’s safe to guess that grey-900 is darker than grey-700. The free bonus here is: we can stop worrying about naming colors.