100%

Colour Theory №2

Colour Terminology

R Proffitt
by Richard Proffitt
iopan design

The subject and use of colour has many terms. Some concepts are easy to grasp, others take a little more thought and concentration. Starting with a few basic terms, this article will take you through a glossary of colour terminology with examples and illustrations that shall - hopefully - make understanding a little easier.

Hue

This is what we usually mean when we ask "what colour is that?" The property of colour that we are actually asking about is "hue". For example, when we talk about colours that are red, yellow, green, and blue, we are talking about hue. Different hues are caused by different wavelengths of light within the visible part of the electro-magnetic spectrum (this "visible light" corresponds to a wavelength range of 400 - 700 nanometers (nm) and a color range of violet through to red). Humans can distinguish approximately 10 million different hues, therefore, this aspect of colour is usually easy to recognize.

four different hues
Contrast of Hue - Different Hues
four different colours, same hue
Hue Constant - Different Colors, same Hue (Blue)

Chroma

Think about a colour's "purity" when describing its chroma or "chromaticity". This property of colour tells us how pure a hue is. That means there is no white, black, or gray present in a color that has high chroma. These colors will appear very vivid. This concept is related to and often confused with saturation. (see below)

four different bright hues
High Chroma - very shiny, vivid
four different grays
Low Chroma - achromatic, no hue
four different medium-bright hues
Constant Chroma - medium chroma

Saturation

Related to chroma, saturation tells us how a colour looks under certain lighting conditions. For instance, a room painted a solid colour will appear different at night than in daylight. Over the course of the day, although the colour is the same, the saturation changes. This property of colour can also be called intensity. Be careful not to think about SATURATION in terms of light and dark but rather in terms of pale or weak and pure or strong.

four different hues, same saturation
Saturation Constant - same intensity, different hues
four different saturations, same hue
Saturation Contrast - various intensity, same hue

Value

When we describe a colour as "light" or "dark", we are discussing its value or "brightness". This property of colour tells us how light or dark a colour is based on how close it is to white. For instance, canary yellow would be considered lighter than navy blue which in turn is lighter than black. Therefore, the value of canary yellow is higher than navy blue and black.

four different hues, same low value
Low Constant Value - same brightness level
four different hues with contrasting values
Contrast of Value - differences in brightness
an example showing tints , shades and tones
Tints, Shades & Tones

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos

Luminance

A certain colour can be defined by hue (0° - 360°), saturation (0% - 100%) and lightness (0% - 100%). Luminance on the other hand is a measure to describe the perceived brightness of a colour (Encyclopædia Britannica: "luminance, or visually perceived brightness"). You can lighten or darken a colour by adjusting its lightness value, but lightness is not the only dimension to consider for luminance. That is because each hue naturally has an individual luminance value.

luminance colour wheel
Luminance or “Visually Perceived Brightness” percentages.

You can see that blue has the lowest and yellow has the highest luminance value. Yellow is actually just six percentage steps away from white. It's good advice to roughly remember the luminance values of the main hues, as it helps to work more intuitively with colour.

If luminance is dependent on hue, it's also dependent on saturation. Reducing the saturation level of any pure hue to 0% results in a 50%-gray and a 50% value in luminance respectively. So for hues with natural luminance above 50%, luminance decreases when the saturation level decreases. For hues with natural luminance below 50%, luminance increases when the saturation level decreases.

Tints

In color theory, a tint is the mixture of a colour with white, which increases lightness.

four different blue tints
Blue Tints
four different red tints
Red Tints

Tones

A tone in colour theory is produced by the mixture of a color with grey; this reduces the colour's saturation.

four blue tones
Blue Tones
four red tones
Red Tones

Shades

A shade is produced when black is mixed with a colour, effectively darkening the hue.

four shades of blue
Blue Shades
four shades of red
Red Shades
a colourful sunset

Colour Systems

Different colour systems are used for different colour conditions depending on how the colour is created. When using projected light, RGB or red/green/blue, is the governing system. For colour that is mixed with paints, pigments or inks on fabric, paper, canvas or some other material, CMY or cyan/magenta/yellow, is the colour model. Because these pure pigments tend to be quite expensive, Black, symbolized by "K", is substituted for equal parts of CMY to lower costs of ink. Another major colour system is HSL or hue/satuation/lightness. This system has many variants switching saturation with chroma, luminance with value etc. but is usually consistent with how the human eye sees colour.

RGB

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.

CMYK

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.

HSL

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.

 


Articles