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.
Last updated
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.
Last updated
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 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 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).
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 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.
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 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, 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 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.
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.
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.
