What is good UIUX design without aesthetics?
The understanding and right usage of colours in designs is very important and that inspired these series of colours.
In the previous article, we learnt about the colour wheel — the subtractive and additive colour models (RYB AND RGB), Warm colours, cool colours as well as neutral colours.
To continue the journey through colours, this article will expose you to tint, shade and tones, colour space as well as colour harmony.
Tint, Shade, Tones
Tint is simply the addition of white to a pure colour. The more white added, the lighter the colour. Little by little the colour tends to white. For example, the addition of white to red gives pink.
Shade is the exact opposite of Tint. It is simply the addition of black to a pure colour. The more black added, the closer the colour tends to black. An example also is the addition of black to blue in an appropriate quantity gives Navy blue.
Tone on the other hand, is the addition of grey to pure colours. The addition of gray always tones down the intensity of colours regardless of how light or dark the colour is.
Colour Harmony
Color harmony refers to a pleasing arrangement of colours. Colour harmonies give birth to colour palettes which are a major necessity in choosing colours for your design. Color harmony delivers visual interest and a sense of order.
- Complementary colours
These are colours on the opposite side of the colour wheel. This combination provides a high contrast and high impact color combination.
2. Analogous colours
These are sets of three colours that stay side by side on the colour wheel. It is best to have one of the colours dominant while others act as accents. This colour combo is often found in nature- green, blue-green and blue.
3. Monochromatic
This uses different values of the same colour. The tint, shade and tones of a pure colour is being utilized here. This also provides a subtle and conservative color combination. It is hard to go wrong with this combination because all the colours are birthed from one colour.
4. Triads
Aka Triadic colours, the equilateral triangle. Triadic colour scheme uses three evenly spaced colours. This provides a high contrast colour scheme although the contrast isn’t as intense as that of the complementary scheme. The combination results in bold and beautiful colours
5. Split Complementary
This makes use of a colour and the two closest tertiary colours to its complement. This color scheme has the same strong visual contrast as the complementary color scheme, but has less “tension”.
It is known to be a good choice for beginners because it is difficult to mess up.
6. Tetradic
This scheme consists of four colours — 2 pairs of complementary colours. These colours can be evenly spaced or not. This scheme forces you to use a large range of warm colours and cool colours.
This scheme also works best when you make one of the colours dominant.
Note that the more colours you have on your palette, the more difficult it is to balance them. So, it is pretty much difficult to work with a tetradic scheme as opposed to a monochromatic scheme or an analogous scheme.
Colour Space
Colour space is simply a specific organization of colours, like a map consisting of colours. It turns the colour models we are familiar with to numbers and sometimes, alphabets. This definition sounds a bit vague, but you would understand better as we dive into some familiar colour spaces.
There are various types of colour spaces and I bet you have come across at least two whilst being a designer. The spaces introduced in this article are CYMK, RGB, RGBA, HEX, HSL and HSB.
RGB
You would have definitely heard of this color space before, in fact, it was mentioned in the previous article. This is simply Red Green Blue. RGB colours are seen in digital images i.e., digital cameras, monitors, computer screens, etc. The combination of these three colours produces over 16 million hues of light.
RGB is great for digital products such as web and app designs, online ad designs, etc.
The format for this model is 100 | 18 |210 or (100, 18,210) (Put this in picture form)
The number 0 signifies absence of a colour and 255 signifies the highest possible concentration of the colour.
255 | 0 |0 = Red
0| 255 |0 = Green
0 | 0 |255 = Blue
This colour space has so many modifications and varieties such as sRGB, RGBA, Adobe RGB, HEX, ProPhoto RGB
Note that these colours cannot be easily converted to CYMK (which is the colour space for inks used in printed products). So,when working on graphics that need to be printed on shirts, as flyers, cards and literally anything printed, ensure you do the design and graphics in CYMK.
RGBA
This is just an extension of the RGB colour space. The ‘A’ represents ‘Alpha’ which is simply Opacity. 0% gives a transparent colour while 100% makes it fully opaque. This value also helps you to play around with different tints of a colour.
It is represented as 100 | 18 |210 | 15%
CMYK
This stands for Cyan, Magenta, Yellow and Key (which corresponds to black). This is a subtractive colour space just like the RYB colour model. To help you understand better, these are the inks used on the press in “4-colour process printing”, commonly referred to as “full colour printing” or “four colour printing”.
This colour space is used for printed products like designers on shirts, flyers, banners, documents, certificates and any other thing you can think of.
The combination of RGB light creates white (Additive), while the combination of CMY inks creates black (Subtractive). The CYM colours ought to combine together to form black but usually produces muddy brown due to some ‘impurities’ found in inks. This led to the inclusion of black in in the printers apart from the high cost of colored inks.
This model is represented in percentage i.e. (34%, 20%, 73%, 2%) => (C, M, Y, K)
100% signifies the full representation of the colour and 0% signifies the absence of the colour in the mix.
HEX
Hex code is a way of representing the RGB colours with hexadecimal digits. It starts with a “#” followed by six hexadecimal digits (numbers 0–9 and letters A-F): two for red, two for green, and two for blue. They may also have two extra digits that determine the color’s opacity. This is also the colour space recommended for digital products/designs.
FF signifies pure colour, 00 signifies absence of colour
For example, FFB736: FF-Red, B7- Green, 36-Blue
HSL
Hue, Saturation, Lightness. This is also another representation of RGB space. This is the preference of many designers because it is instinctive.
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue, up to violet. All rainbow colours are represented here.
Saturation- the colour intensity is a percentage value, 0% means a shade of gray, and 100% is the full color.
Lightness — the amount of white is also a percentage value, 0% is black, and 100% is white.
The format is simple as well (120, 40%, 30%)
HSB / HSV
Hue, Saturation and Brightness/Value. The difference between this and the HSL model is the Brightness which helps you to tweak the darkness.
While 100% of L gives white in HSL, 100% of B gives black in HSB and vice versa for the 0%.
Representation of a colour in the spaces above
Other Colour spaces are HSL, HSV, CIELAB, LAB, YUV, CIE, XYZ and several others.
Colours go beyond just what you see. As a designer, you ought to know what colour space you should use for a particular project especially when it comes down to the RGB and CYMK spaces.
In the next article, I would be giving you a few tips on how to choose colours for your UIUX projects.
