Design Notes I: Color

This is the first of a series of notes on design I took when reading articles and books on design topics.

HSL

It’s a color space defined by hue (0-360), saturation (0%-100%), and lightness (0%-100%).

Okay, that’s cool, but why not just use RGB?

The short answer is HSL can be more intuitive when you want to get variants of a color. For example, sometimes in a design, you want to get a darker or a lighter color of your chosen color. And you can do so easier by changing the saturation and lightness values. Not so easy when dealing with RGB hex values.

This article on Medium discusses this topic and the interesting concept of perceived brightness.

Luminance: Perceived Brightness

Luminance is the perceived brightness of a color. This is not only affected by lightness. In fact, different pure hues have different luminance.

Pure hue is defined at a saturation level of 100% and a lightness level of 50%.

If you convert pure hues into grayscale, they look quite differently: some are much darker than the others. Let’s make a chart to show their converted values in grayscale.

As you can see in the chart, out of all colors, yellow has the largest value and blue has the smallest value after converting to grayscale despite having the same saturation and lightness.

Luminance and contrast

Contrast can be seem as the distance of luminance between two colors, therefore, luminance helps with choosing colors with high contrast. Higher contrast helps with readability.

Choosing Colors

Primary Color (or… Base Color)

Pick one. This article on Smashing Magazine offers some practical tips on doing that.

Tints and Shades

They are variants of the primary color.

Accent Color

Accent color stands out. It is used far less in the design than the primary color and it draws attention to where it’s used. You can use tools to generate an accent color based on the primary color you use.

Semantic Colors

Semantic colors have meanings. Bootstrap, for instance, uses four different colors for info, success, warning and error.

Neutral Colors

These are white, black, gray.

💆‍ Cool. Now we have a systematic way to come up with colors in a design.

References

  1. Color Luminance
  2. Color in UI Design: A (Practical) Framework
  3. A Simple Web Developer’s Color Guide
  4. Basic UI color guide