Colour is a fundamental part of our visual experience. It is one of the first things we notice about objects and scenes. Colours have the power to evoke emotions, change perceptions, and influence behaviour. There are many complex terminologies and systems for classifying, describing and quantifying colour. In this article, we will explore 5 key colour terminologies that are essential for understanding and communicating about colour and visual design.
The Terminologies
Hue
Hue refers to the dominant wavelength of light from a colour stimulus. It is what we colloquially describe as the colour “name” – red, orange, yellow, green, blue, purple. Isaac Newton first identified hue as one of the fundamental attributes of colour in his colour wheel from 1664. On the modern colour wheel there are 6 main hues – red, yellow, green, cyan, blue, magenta. These are separated by intermediary hues such as yellow-green, blue-green.
Within the visual spectrum, hue is determined by the dominant wavelength of light. Longer wavelengths appear redder, while shorter wavelengths appear bluer. Hue is a circular dimension, so the sequence of hues loops back on itself to create a continuous colour wheel.
| Hue | Wavelength (nm) |
|---|---|
| Red | 700-635 |
| Orange | 635-590 |
| Yellow | 590-560 |
| Green | 560-490 |
| Cyan | 490-520 |
| Blue | 520-450 |
| Magenta | 450-400 |
In colour models like RGB and HSL, hue is represented as an angular dimension ranging from 0-360 degrees around the colour wheel. 0/360 is red, 60 is yellow, 120 is green, 180 is cyan, 240 is blue, 300 is magenta.
Hue is a vital tool for artists and designers. It allows colours to be mixed and matched harmoniously. Understanding hue relationships enables the creation of colour schemes and palettes.
Saturation
Saturation, also known as chroma, refers to the intensity or purity of a colour. It describes how vivid or dull a colour appears.
A highly saturated colour has a pure, intense hue. As saturation decreases, colours start to appear more grey, faded or washed out. At the minimum saturation, any hue becomes a shade of grey.
In scientific terms, saturation depends on the ratio of pure hue to white light mixed into a colour. A saturated hue has a high ratio, with minimal white light dilution.
| Saturation Level | Description |
|---|---|
| High | Intense, vivid colour |
| Medium | Moderately saturated |
| Low | Dull, diluted colour |
| Zero | Grey, no hue |
In colour models like HSL/HSV, saturation is mapped on a percentage scale, where 100% is fully saturated vivid colour, and 0% is completely desaturated grey.
Controlling saturation is important in design to adjust the vibrancy of colours. Saturated colours are bold and eye-catching, while low saturation can mute colours for a softer or vintage aesthetic. Understanding saturation helps designers curate colour palettes with desired intensities.
Brightness/Value
Brightness and value describe the lightness or darkness of a colour. A colour with high brightness/value appears lighter, while a colour with low brightness/value appears darker.
Brightness depends on how much black is mixed into a colour. At full brightness, there is no black added. As black content increases, colours become progressively darker until they reach zero brightness at full black.
| Brightness | Description |
|---|---|
| High | Light, pale colour |
| Medium | Medium lightness |
| Low | Dark, deep colour |
| Zero | Full black |
In HSL/HSV models, brightness is mapped to a percentage where 100% is white, and 0% is black. In RGB, brightness depends on the relative values of the red, green and blue channels. Higher values give brighter pixels.
Adjusting brightness and value is useful for darkening colours to create depth or highlights, lightening colours for a bright fresh look, and creating contrast in compositions. Understanding these dimensions helps artists and designers to intelligently manipulate colour lightness.
Colour Temperature
Colour temperature describes the relative warmth or coolness of white light or greyscale shades.
It is measured on the Kelvin scale, which originated with heating blackbody radiators to different temperatures and observing the colours produced. Lower Kelvin temperatures (5000K) are bluish-white and considered “cool” colours.
| Kelvin Temperature | Type |
|---|---|
| 1000-2000K | Candlelight (warmest) |
| 2500-3500K | Tungsten bulbs |
| 4000-5000K | Fluorescent, sunlight (neutral) |
| 5000-6500K | LCD monitors |
| 6500-8000K | Overcast sky (coolest) |
Colour temperature profoundly impacts the look, feel and mood of images. Warm low Kelvin light appears intimate and comforting. Cool high Kelvin light seems more clinical and harsh. Cinematographers carefully use colour temperature to shape the emotions of scenes.
Understanding Kelvin temperatures allows designers to make informed choices about lighting conditions and colour balances. It provides essential context for evaluating and adjusting the white point in images.
Tint/Shade
Tint and shade describe colours formed by mixing a hue with white or black respectively. Tinting adds white to a colour to lighten it. Shading adds black to a colour to darken it.
Adding increasing amounts of white creates progressively lighter tints. At 100% white mix, any hue becomes white. Adding increasing black creates progressively darker shades. At 100% black mix, any hue becomes black.
| Mix | Description |
|---|---|
| 10% white | Light tint |
| 20% white | Medium light tint |
| 50% white | High tint |
| 10% black | Light shade |
| 20% black | Medium dark shade |
| 50% black | Dark shade |
Tinting and shading allow hue and brightness to be adjusted independently. This helps generate a rich variety of colour mixtures useful for art and design applications.
Applications in Design
These 5 terminologies provide a framework for intelligently manipulating and reasoning about colour properties. Here are some examples of how they can guide design and artistic decisions:
Crafting Brand Colours
Hue, saturation and brightness allow brand colours to be strategically defined. Specific hue combinations can create harmony. Saturation makes logos bold and vibrant. Brightness differentiates elements.
Composing Scenes
Hue, saturation and brightness impact mood and focus. foreground saturation draws attention. Background desaturation adds depth. Brightness contrast highlights points of interest. Warm and cool hues can set temperature.
Cinematography
Kelvin colour temperatures evoke emotion. Warm sunset hues feel nostalgic. Cool moonlight seems lonely. Dynamic temperature changes increase impact.
Print and Digital Design
Tinting lightens text on dark backgrounds. Shading darkens text on light backgrounds. Saturation boosts visual energy. Desaturation mutes elements.
Data Visualization
Hue indicates categorical data. Saturation and brightness quantify values. Warm-cool temperature indicates positive-negative. Tints and shades map number gradients.
Conclusion
Understanding hue, saturation, brightness, colour temperature and tint/shade provides a robust conceptual toolkit for working with colour across any visual discipline. These 5 terminologies form the basic building blocks for describing, analyzing and manipulating colour in a rational, intentional way. Mastering these concepts allows artists and designers to make deliberate colour choices that shape experiences and resonate with audiences. With practice, colour becomes a precise tool for crafting aesthetics, directing attention, conveying information and evoking targeted emotional responses.
