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.
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.
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.
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.
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 aboutcolour, 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.
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 itlighter. 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 tappear duller and more vintage. Tints often work well with sky blue colours in order to achieve a bright and happy spring or summer theme.
About the author
I'm Daniel Schwarz. I'm the founder and editor of Airwalk Design as well as creative director and designer at Airwalk Studios. When I'm not designing for startups I write regularly about Adobe, Sketch App and other design-y things for Designmodo, Creative Market, SitePoint and Smashing Magazine. I'm 24 years of age and currently active in the digital nomad community. I love Sketch App, travel and writing.
Published , thanks for reading.