Enter our contest to get your work in our magazine - sign up here
Follow us on Pinterest! Like us on Facebook! Follow us on Twitter! Download our Google Chrome application!
NavigationSearch
Article | Design Concepts & Colour Terminology

Colour Terminology


I've already spoken about color theory, and within that article you may have heard some terminology that you're unfamiliar with. Hue, tone, shade, what's all this nonsense? In this article, I will explain what these words mean, along with a few others. To offer you a better understanding of the word colour, I'll be teaching the definitions of chroma, saturation, tone, shade, tint and value. If one should ask you about a colour, you should be able say more than "it's blue!". Now, let's try to impress the ladies with a bit of technical twaddle.

Who? Hue!


As far as technical abrakadabra goes, "Hue" has the easiest definition. It simply marks the colour. When we say that something is blue (see example below), we're describing it's hue. Different hues enforce different reactions to the target audience, as we demonstrated in color theory. The term "hue" will arise when using Image Adjustments in Photoshop.
Design Concepts & Colour Terminology | Airwalk Design

Chroma


A little harder to explain, but here goes. Chroma refers to the purity of a colour. If no black, white or gray is added to a colour, it's said to have high chroma. In a sense, this could be the brightness of a colour. If a colour is high in white chroma, the brightness would be high. Else, if a colour is high in black chroma, the brightness would be low. Many hues with the same level of chroma will hurt your eyes, try to vary them. Here's an example of the Color Picker in Photoshop, demonstrating the varied chroma of red hues.
Design Concepts & Colour Terminology | Airwalk Design

Saturation


Saturation is not so different from chroma. It defines how pale a colour is (in comparison to it's purest hue). A colour with low saturation would have less of it's purest hue and more chroma, making it appear a little dull. These types of colours are easier to look at. In the example below, the red has black chroma and low saturation. Look at how it compares to the red inside the wine glass. Which is more threatening to the eyes? If you said wine, then you were right. It contrasts very well with the 100% chroma in the whiter elements.
Design Concepts & Colour Terminology | Airwalk Design

Value


Value could also be classified as lightness or the creation of contrast. Lighter colours have higher values, with white being the colour with the highest value, and black being the colour with the lowest value. When you're thinking about colour, bare in mind that a contrast of values is more charming in your designs. Look at the example below: the hues are very pure due to low chroma levels. However, even though I've reduced the saturation (on the right side), the image is still striking. This is because there is a contrast of values.
Design Concepts & Colour Terminology | Airwalk Design

Shade, Tint & Tone


Shade is the amount of black added to a colour to make it darker. When something is said about making something a shade lighter, this is incorrect! What they mean is to make it a tint lighter. Tinting is to add white to a colour to make it lighter. Designers often use darker shades of hues as a replacement for using a neutral black. If a colour that has been tinted is not a pure hue, we call this a pastel. These colours have high values.

When grey is added to a hue, we call this toning. Tones are duller, dustier, chalkier and softer than pure hues. These types of colours offer a vintage, faded-away feel to a design. Softer tones can often make a design seem calmer, especially if the colour being toned is a cool colour such as blue (like in the example below). I've edited this example into three sections. The left has been shaded to appear darker, the middle has been tinted to appear lighter, and the right has been toned to appear duller and more vintage. Tints often work well with sky blue colours in order to achieve a bright and happy spring or summer theme.
Design Concepts & Colour Terminology | Airwalk Design
Daniel Schwarz
says:

Design Thinking: Colour Terminology teaches you the words you've always wondered about, such as hue, saturation, chroma, value, tone, shade and tint #colour-theory #design-thinking. Follow our Colour Theory board on Pinterest http://dizy.be/2269d3 for more beautiful examples - twigged by on .
Daniel Schwarz
Daniel Schwarz says:

Another note to add, #chroma can be changed in #Photoshop using Image Adjustments - Hue/Saturation - Lightness (or CTRL + U)
Daniel Schwarz
Daniel Schwarz says:

Here's a #Photoshop #tutorial http://dizy.be/1527eb that you may find useful after reading this article on #Color-Theory, think about the theory of colour when creating this
Article (re)twigged by Daniel SchwarzDaniel Schwarz
Follow
Report


I'm from London, UK

About me

Founder and editor of Airwalk Design, CEO of Airwalk Studios, start-up entrepreneur, teacher, designer, developer, business whiz, serial nerd, spider-man lover, animal enthusiast. Hi.
29 comments 187 twigs 1 retwig
Featured ArticleArticle | 5 Vintage Typography Posters By Courtney Blair Design & IllustrationFor this weeks Typography Tuesday, I bring you Courtney Blair and 5 of her inspiring #vintage #typography designs...
Daniel Schwarz says: Hi Dane, that may well be an option. If you had anything that you'd like to see in our mag, share it with us... [read on]
Loading twigs...