> For the complete documentation index, see [llms.txt](https://design.novacura.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://design.novacura.com/color-terminology.md).

# Color Terminology

{% hint style="danger" %}
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.
{% endhint %}

### 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](https://en.wikipedia.org/wiki/Hexadecimal) 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.

{% hint style="success" %}
Due its compact shape and wide-spread use, HEX is our preferred format for colors!
{% endhint %}

### 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.

![](/files/-LwD7Kt_Uk62uAwlg6FC)

### **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.

![](/files/-LwCyUBoM6PHXFO-sQZ9)

### **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.

![](/files/-LwCzphGeudcDfgwpwyv)

### 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.

![](/files/-LwD5HxUg3x8-L0npjpe)

### 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.