> 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://design.novacura.com/color-terminology.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.