Stop picking colors like a robot
Last week, we talked about using color with intent (not just for decoration) and recalled the three only suitable reasons for using it in a chart.
Today, I suggest we add another foundational piece: understanding how to define a color properly.
Defining a color on a computer
There are several ways to define colors digitally. Here are the most common:
- a name like
"skyblue", - an RGB triplet, where you specify the amount of Red, Green, and Blue,
- or a hex code, which is just the RGB values written in hexadecimal (like
#87CEEB). see how it works
But here's the problem:
If I ask you to make a pleasant green like this, how much red, green, and blue would you choose?
Hard to say, right?!
RGB is not how humans think about colors. It gives no intuition.
HSL (or HSV): a more human model
That's why we use the HSL (Hue, Saturation, Lightness) model — also called HSV (Hue, Saturation, Value).
It's much closer to how we perceive colors.
A color in HSL is defined by three values:
- Hue: the color itself, represented as an angle from 0° to 360° around the color wheel.
- Saturation: how intense the color is (0% = gray, 100% = pure color).
- Lightness (or Value): how bright or dark the color is (0% = black, 100% = full brightness).
This model is far more intuitive. When you tweak HSL sliders, you instantly see what changes.
Play with it
This concept is always the first thing I teach when we reach color theory in my courses.
It's the foundation for understanding color harmony.
Because words alone aren't enough, I built small interactive widgets so you can feel how hue, saturation, and lightness interact.
As often, my explanations are available for R and for Python users with reproducible code!
How this helps your dataviz
Knowing the HSL model helps you choose colors that work well. It's at the center of many dataviz rules.
For example:
- Keep colors in a palette with similar lightness.
- Avoid overly saturated tones that feel aggressive.
- Use higher saturation to highlight key elements.
- Choose a very light or very dark background, but not something in between.
So next time you're picking a color for your chart, don't think "red" or #234323.
Think:
What hue do I want?
How saturated should it be?
How bright or dark should it look?
That's how you start designing color with intention.
PS: Color theory is weird. At first, it feels simple. But the deeper you go, the more you realize you know nothing. If you really want to get good at it, the best resource is Lisa's work.
See you next week!
Yan
Enjoyed this?
Get one short, actionable dataviz tip every Saturday. Join 19,000+ data people.