Color Terminology

We need a shared language when working with colors. This page explains some potentially confusing words and concepts by going through the most common color formats.

This section in not officially part of our guidelines. It's a tool for designers and developers alike to create a shared language around colors.

RGB

RGB is an additive color model that combines red, green and blue to define colors. A color defined with the RGB model consists of three parameters, that determine the intensity of red, green, and blue, respectively. The parameters are usually defined as integers between 0 to 255. Our "Novacura blue" is (1, 171, 230), which contains mostly blue, a lot of green and a pinch of red. (255, 255, 255) equals pure white, while (0, 0, 0) is black.

RGBA

RGBA is the similar to the RGB model but with an added alpha channel which specifies the opacity of the color. The alpha parameter is usually a number between 0% (fully transparent) and 100% (fully opaque).

HEX ❤️

A HEX (or Hexadecimal) color is simply another way of defining a color using the RGB model. Instead of three parameters ranging from 0 to 255, HEX colors are expressed as a six-digit combination of hexadecimals that defines its mix of red, green and blue. The format for HEX colors looks like #RRGGBB. For example, the RGB color (1, 171, 230) becomes #01ABE6. Similar to the alpha channel in the RGBA model, editors that use HEX colors usually have a way to alter opacity as a separate setting.

Due its compact shape and wide-spread use, HEX is our preferred format for colors!

HSL

HSL is a color format that combines hue, saturation and lightness to represent colors using attributes the human eye intuitively perceives. For example, our Novacura blue equals (195°, 99%, 45%), where 195° defines the hue while 99% and 45% shows the saturation and lightness.

Hue

We like to think of hues as colors in their "purest form". Technically, a hue is a color's position on the color wheel that lets us identify a color as a mix of red, green and blue. For the HSL format, hue is measured in degrees, where 0° is red, 120° is green, and 240° is blue.

Saturation

Saturation is commonly defined as the "intensity" of a color, or how "vivid" a color looks. In the case of HSL, 0% saturation is grey (no color), and 100% saturation is the most vibrant and intense version of a specific color. Without saturation, hue becomes irrelevant.

Lightness

Lightness, sometimes referred to as value or tone, measures how close a color is to black or white. In the HSL format, 0% lightness is pure black, 100% is pure white, and 50% lightness is the purest version of given hue.

HSB

HSB follows the same definition as HSL with one exception, lightness in HSL is not the same as brightness in HSB. In HSB, 0% brightness is always black, but 100% brightness is only white when the saturation is 0%. 100% brightness in HSB is the same as 100% saturation and 50% lightness in HSL.

Tint, shade and tone

A tint is a mixing result of a color where white has been added. A tint is therefore lighter than the original color. A shade, on the other hand, is a mixing result of a color where black has been added, and is therefore darker. Tone is a result of mixing both black and white (i.e. tinting and shading) with the original color.

Temperature

Sometimes, people refer to colors as "warm" or "cool". Warm colors contain high amounts of red and yellow, while cool colors contain blue and cyan.