Colour Theory Pt-1 | Colour Modes and Colour Ingredients

Find in the digital world, how colours are processed and what are the ingredients which make up the colour we perceive with human eye.

When we talk about design, no matter if it is UI/UX design, Graphic design, Interior design, colour plays a vital role because visual first impression matters.

In this series of blog we will see fundamentals of colours and science behind that, starting with colour modes, chromaticity diagram and colour ingredients.

Colour Modes

There are 2 types of colour modes used majorly:

• CMYK = Cyan Magenta Yellow and Black

• RGB = Red Green Blue

Use CMYK for art work for which the result will be printed, i.e use CMYK for printing.

Use RGB for artwork for which the result is digital, i.e. UI/UX design for an app.

Chromaticity Diagram

In the graph, the entire shape represents the range of colour that a human eyes can perceive. The RGB area represents the range of colour that digital screens can process and CMYK area represents the range of colour a printer can process.

Chromaticity Diagram

The Colour ingredients

Hue

Hue is basically the origin of the colour that we see. In a colour wheel, the hue value ranges from 0° to 359°, corresponding to the range of colours perceivable by the human eyes.

Colour Wheel

Saturation

Saturation is the intensity of hue. For example if the hue colour selected is red(value 0) and saturation value is 100, the colour is in its maximum intensity and if the saturation value is 0, the colour is in it’s minimum intensity.

Hue = 0, Saturation = 0

Hue = 0, Saturation = 50%

Hue = 0, Saturation = 100%

Value

• The value is nothing but the brightness of the colour.

  • Tint

    • Brighter version of the hue

      • Hue + White

  • Shade

    • Darker version of hue

      • Hue + Black

  • Tone

    • Hue + Gray

Hue = 0, Saturation = 50% Brightness = 0%

Hue = 0, Saturation = 50% Brightness = 50%

Hue = 0, Saturation = 50 % Brightness = 100%

HSB/HSV diagram

All above of the above concepts in colour ingredients can be summarised using the HSB/HSV diagram.

HSB/HSV Diagram

As seen in the diagram, the value/brightness in the y-axis adjusts the brightness of the colour, saturation in x-axis adjusts the intensity of the colour and the value of hue along the circle from 0° to 360° adjusts the origin of the colour.

This model of colour is known as HSB/HSV colour model. In most design software there is another colour model called HSL(Hue, Saturation and Luminance) only difference being that the resultant colour in HSV if brightness = 100 will be based on saturation where as in HSL if brightness = 100 the colour will be white. More about it here.

Next Steps

Now that we have understood how to compose a colour, pick up a design tool and play around with the colour palette, adjusting the hue, saturation and brightness.

Stay tuned for next part which talks about the colour wheel and colour psychology!

References

• Skillshare course by Arash Ahadzadeh - Create Amazing Color Schemes for Your UI/UX Design Projects

• Youtube Channel - PiXimperfect

• Figma for design.