Basics of colours and its properties

Arvind Singh

Published in

Bootcamp

5 min readJul 10, 2022

Written while keeping UI/UX & Product Designers in mind!

Let’s make our basics correct first!

What is colour?

Colour is the element of art that is produced when light, striking an object, is reflected back to the eye: that’s the objective definition.

What is RGB, HSL, HEX, CSS?

RGB, HSL, HEX, CSS all are basically the colour naming schemes. We as a human can understand colours by their common name, like Blue, Black, White, etc, but computers can’t.

While designing a mobile interface on Figma, let’s suppose I want to make the button colour “Japanese Blue”, we can’t directly write the name of the colour as Japanese Blue, because computers don’t understand our language. To make sure our computer understands the colour correctly, we use colour naming schemes like RGB, HSL, HEX, etc.

Note: In this article we will only discuss RGB

Pixel and it’s relation with RGB

Images on computer screens (or televisions, iPads, etc.) are made from tiny dots of colour, like a printed picture. A dot of colour is called a “pixel” and the number of pixels in a certain size screen is the “resolution”. The smaller the pixels, the better the image.

Each pixel can be imagined as a set of 3 block. One block represents Red, second block represents Green and third block represents Blue. The mixture of all the three colours produce the final colour on the screen. The below picture represents the relationship of pixel with the RGB.

Difference between RGB/HEX?🧐

RGB and HEX is just the way of defining the colour. In this model we basically use Red, Blue, and Green colour and mix them to produce wide array of colours.

There is no informational difference between RGB and HEX colours. They are different ways of expressing the same thing: a red, green and blue colour value. The biggest difference is who is eventually going to use the colour: web sites (in the form of CSS and HTML), apps, basically product and graphic design need HEX colours, while printers or other offline uses will sometimes want RGB colours.

While designing the web and app interfaces we define the colours using HEX values which is basically the representation of the Red, Blue, and Green colours.

What is Hexcode?

Every colour has a Hexcode, something like #12BE46. Hex means 6 and our colour code is 6 character long.

While writing the hexcode we use hexadecimal notations. Hexadecimal uses digits 0–9 and characters staring from ‘A’ to ‘F’ which altogether contains 16 different values.

The below picture depicts the meaning of the hexcode. The first two character represents the Red, and consecutively Green and Blue.

On a scale of 0–15, 0 basically means no light(Imagine your TV when its not ON), all black and 15 i.e F means light of full strength.

So let’s see how it works.

#FF0000 should be Red, since first two place represent Red and FF means full strength and rest Green and Blue colour is having 0 strength. Same way #00FF00 should be green and same way #0000FF should be blue. The below picture clearly represents the result.

What will happen if we keep all the three colours to zero (lowest saturation), i.e #000000. It will be black. And what about keeping the saturation of all the three colours to maximum?😤

So basically #FFFFFF will be white.

Now further by adjusting the values of Red, Green and Blue colour we can generate the wide array of colours. Go on any design software and try out yourself.

Using colours in UI/UX design projects

Every UI project needs a bunch of colours. These colours can be broadly divided into 4 categories.

Primary Colours: Colours that are most often used throughout your UI and provide the product a unique identity. These are typically the colours that a brand chooses to represent itself. Brand awareness is increased when primary colours are used.

Secondary Colours: These colours highlight or complement the primary colour. To make the UI elements stand out, these should only be used in balance. The brand guidelines will typically define these colours as well. A brand may typically have 1–6 secondary colours.

Neutrals: These colours include shades of grey, all the way from White to Black. The majority of your UI is made up of them, which are used for backdrops, text colours, etc.