Color math for designers
Without a doubt, color is one of the most important aspects of working with interfaces. It sets accents, moods, interactivity, and in general, a visual representation of what your future product will look like. The skill of using color correctly, specifically in my journal of priorities, stands in the first row, sharing the palm with typography and grids. Color theory is multifaceted, and each professional approaches color selection in different ways.
When choosing colors, it is worth considering several factors: your target audience, the style of the product, the device(s) that will use your product, as well as the context for using your product (maybe you create an application for the miners who work underground; believe me, a light interface with pink CTAs will be a bit too much).
Up to the point of choosing the primary and accent colors, things usually go pretty well because everyone is able to open Pinterest or Dribble to find a couple of good shots, spot a good accent color, add it to their project and move on. Of course, knowing color theory, you can pick complementary or accent colors based on your choices, or you can just use color.adobe.com, which will do everything for you. We’ll assume that you can do that without any problems either, but the interesting moments come a little later, when you have to start working with shades, different gradients, and states of elements.
When I reached these stages in my work in the past, I was guided more by my own vision or I used opacity. I did not have a clear understanding of the processes and how to do it the “right” way. It’s worth making a digression. There is no only right solution in this context. Everything will work in any case. The main thing that it should suit your TA and business needs. There are ways to help you work a little easier with it and create solid interfaces. This will help us understand color coding, which today I will try to tell you about.
HEX
A hex code is a 6-digit number in which 3 elements are encoded: red value, green value, and blue value. Each of the 2-symbol elements expresses a color value from 0 to 255.
In the middle of the hex code you can also find the letters A-F, which are a representation of numbers from 11 to 15. It is easy to copy, and that’s why so many designers use it. It’s not as good and simple when it comes to creating shades because you’ll be doing more math than design. Personally, I only use HEX codes in my work if I need to copy a specific color or transfer information to the development.
HSL
HSL stands for hue, saturation, and lightness. I use this code a lot more often in my work, and I’ll explain why. A hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
Lightness is also a percentage; 0% is black, 100% is white. Note that the purest color will be at 50%.
Here within a color you can create tones that look richer. For example, if you want to create a hover effect, with the lightness field you can add just the right value to your color, keeping its hue and saturation, just adding some lightness to your color. Not bad, right? It sounds a lot better to me than trying to click and find those values at random. As I said before, there’s nothing wrong with that, but once you’ve tried it, it’s hard to go back because you’ll start to notice the hues, you’ll start to give it a different meaning, and that will trigger you, and сome on, everything has to be perfect, doesn’t it?
I’m not a big fan of that color coding because it’s a bit confusing that you playing the lightness among the white, color itself and black. So you are going from the white to the color and than to the black. But it’s still easier for me than playing around HEX.
HSB
It’s my favorite type of coding I use most often in my work. Its principles are very similar to HSL. HSB goes for Hue, Saturation, Brightnes. We are already familiar with Hue and Saturation, but what does Brightness do? Brightness is a number between 0 and 100. But there is a nuance — at 0 brightness, the color becomes black.
How can you use this in your work? The example I described in HSL will easily work here as well, but what can you do besides that?
Create different color variations. With a little tweaking of the hue on the circle, we can get different shades of your primary color. For example, we can add different shades to our green.
One of the most common cases in my work is accessibility. You choose a color, but the contrast ratio is AA or AA+, and you really need AAA. No problem — change the saturation or brightness, and you’re done.
You come across a great shade of blue, for example, but you realize that it’s a little dull. That’s no problem for you now, because you can correct it manually and get the value you want.
As you can see, HSB is more straightforward than HSL. You’re just going from the color itself to the black tint. Mostly, I play around brightness value to create diffetent shades, states and etc.
Conclusions
I would advise everyone to understand how color is coded and how to work with it because it gives a designer quite a lot of flexibility in their work. You will not need to mindlessly click on the color wheel hoping to get what you want. With simple manipulations you will control color 100% yourself, get the necessary shades, pass accessibility and have the design in one tone. Needless to say, this approach will look better and more mature. I hope my super short tutorial encourages you to figure out how color math works. This is a topic that you just have to try once yourself to make sure you figure it all out for sure. I wish you the best of luck with this. I hope it helps you bring something new to your design process.
Useful materials
- The fundamentals of understanding color theory
- Color theory
- Book “Interaction of Color” by Josef Albers
- Color codes 101
