Quick guide to Color Spaces

Color spaces are a way to categorize colors using numbers and calculations. Typically, different numbers represent different colors, but some companies create their own color spaces and give each color a name, like Pantone.

In the physical world, paint brands sell sets of colors that reach different color ranges. This is also true in the virtual world. Some color spaces provide a bigger and brighter color range than others.

Knowing how color spaces differ is really important. Cambridge in Colour says, “when trying to reproduce color on another device, color spaces can show whether you will be able to retain shadow/highlight detail, color saturation, and by how much either will be compromised.” Knowledge of color spaces is essential when trying to replicate colors on different devices.

In this article I’m going to explain the differences you might encounter while working on digital art or design.

HSL and HSB

HSL and HSB are two similar yet discernible color modes. HSL stands for “Hue, Saturation and Lightness” and HSB stands for “Hue, Saturation and Brightness”. To understand their differences, we need to understand how each of these color modes create color.

Hue

Hue is pure color without any interference. Hue can also be thought of as the color type (red, green, yellow, blue, and so on). Hue is measured by degree on a color wheel that ranges from 0º to 360º.

Saturation

Saturation is the intensity, or richness, of the color. It ranges from 0 (no color, shade of grey) to 100 (intense color).

Brightness

Brightness is how bright the color is. It ranges from 0 (black) to 100 (full color).

Lightness

Lightness is how light a color is. It ranges from 0 (black) to 50 (full color) to 100 (white).

The Difference

While 100 brightness in HSB mode produces a full color, 100 lightness in HSL produces white. That’s because HSL represents the way paints mix together in the real world. The HSL lightness dimension corresponds to the amount of black or white paint in the mixture.

The HSB mode represents how colors appear under a light. If we shine a bright white light onto an object, the color of the object will appear brighter and more intense. Shining a dim light will make the color appear darker and less bright.

The problem

HSL and HSB share a common problem: they don’t rely on human perception of color. Take for example the red and yellow. If we put a red and yellow side by side with the same values for saturation and brightness/lightness and add a black & white filter, the red and the yellow will look like the same shade of grey.

Humans, however, perceive the red color as naturally darker than yellow. When using these color modes to adjust an image, you may need to manually correct the values.

CIELAB and CIELUV

CIE XYZ and CIE RGB were created to align color spaces with how humans perceive colors. As time went on, CIELAB and CIELUV were created to better the CIE XYZ and CIE RGB models. They were created by the same organization, the CIE — Commission Internationale de l’Eclairage (International Commission on Illumination). The CIE is a non-profit organization whose objective is to study light, illumination, colour and colour spaces.

To understand CIELAB and CIELUV, we need to know how the colors are arranged.

Lightness

CIELAB and CIELUV both report the degree of lightness in color spaces. Both represent how humans perceive how light a color is. The degree of lightness ranges from 0 (black) to 100 (white).

L*A*B*

CIELAB is an attempt to organize colors based on the “opponent color” model of vision. If you look at a red car for long enough, you will see it’s “ghost” in green color when looking away.

CIELAB uses letters and axes to demonstrate this phenomenon. The A in L*A*B represents green-red axes. Negative values are green and positive values represent red. The B in L*A*B represents blue-yellow axes. Negative numbers are blue and positive represent yellow.

L*U*V*

The CIELUV was created to improve the old XYZ space and correct color proportions in terms of mathematical equations.

The U and V values correspond to chrominance, a signal used in video systems that stores the color information of a picture. The U corresponds to the blue projection and V to the red projection.

The Difference

CIELUV is commonly used in additive color (mixing of light) applications like TVs, and monitors. CIELUV is used in additive color applications because the formula utilizes the same behaviors when colorful lights are mixed together. Mixing red, green and blue light (primary colors of lightness) gives you white light.

CIELAB uses subtractive colors. Paints are subtractive colors. When primary colors are mixed (magenta, cyan and yellow), the color black is created. CIELAB is commonly used when creating a product that uses subtractive color like magazines, dyes, newspaper, etc.

Final Thoughts

I hope the article helped you understand a little bit more about color spaces. Do you have any information about colors you would like to share with us? Feel free to leave a comment!

If you like this post, don’t forget to leave a “clap” and follow us for more content.