🤖 Stop picking colors like a robot


👋 Hi!

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.

See you next week!

Yan

PS: This little newsletter is growing faster than I imagined: almost 15,000 of you now! 😅As a result, the price of my email software (Kit) is skyrocketing. Would you be interested in sponsoring an upcoming issue? (~45% open rate)

PPS: 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.

Yan Holtz

Find me on X, LinkedIn, or check my Homepage

👋 By the way, here is how I can help!

  • Master R: Join my productive R workflow online course, already helping hundreds to excel in R, Quarto, and GitHub.
  • Team Training: Hire me to train your team on Data Visualization and Programming.
  • Engaging Talks: Book me for short, impactful talks on Data Visualization and Programming.

Check yan-holtz.com or hit reply any time! I love hearing from you.

https://preview.convertkit-mail2.com/unsubscribe
Unsubscribe · Preferences

background

Subscribe to Dataviz Universe