(click anywhere to close)
OPEN MENU

[Colour Theory] Formats & Definitions

category: Design | course: Colour Theory | difficulty:

What actually is colour?

I’m not trying to start a philosophical rambling here, but just want to let you stop and think for a minute. It’s important to know what colours are, how they are formed and how we interpret them. If you are aware of this basic theory, it is easier for you to identify colours, predict their effect and match them with each other. I’ll not go into great detail, because this is only a beginners guide.

Light Waves

VisibleLightSpectrum

Colours are light waves. Well, it is a property of light - there are light waves we can’t see, like UV-rays from the sun. The colour of a light wave is determined by its wavelength, and visible light is everything within a range of 400 – 700 nanometres. At the top of that range, light is red. At the bottom, light is violet. Above that 700, is the part that we call infrared (under red). If you go lower than 400, you’ll find ultraviolet (above violet).

The names infrared and ultraviolet come from the fact that a higher wavelength, means a lower frequency, so frequency-wise infrared is ‘below red’ and ultraviolet ‘above violet’.

As you can see, the ends of this spectrum are colours that are very close to each other, and that’s why colours can be displayed in the famous colour wheel. That wheel is nothing more than the spectrum of visible light bend into a circle.

The Eye

Our eyes interpret light waves and send them to our brain, which makes us see all the colours in the world. There are two different types of receptors in there:

  • Rods. About 125 million of them. They can’t see colours, but make us able to see the difference between shades and tones of lights. They enable us to walk in dark places, and adjust our eyes to bright sunlight. They recognize light and motion.
  • Cones. Only 7 million of them. They are divided into three groups, namely red, green and blue.
    • Colour blind people have one or two of these receptors malfunctioning.
    • Fun fact: we don’t really see that many colours. For example, the mantis shrimp has 16 colour receptors, so you could say that animal sees the world in 16 dimensional colour.

But, I see more colours than just red, green and blue! Yes, these cones work together to blend the three different main colours. Combining that with our enormous amount of rods makes us able to see roughly 10 million colours. Although, everybody perceives colour a little differently due to differences in our eyes and brains.

To create order out of this chaos, numerous formats and definitions were invented for working with colour.

Formats

There are a few main formats, each being preferred in a different industry. However, most software has support for all of these and they are used interchangeably by everyone, so I recommend learning all of them and picking your own favourite.

ColourTheoryFormats

  • RGB. Represents a colour by setting a value for the red, green and blue channels respectively. These values can range from 0 to 255.
    • Examples: Red is rgb(255,0,0), pink is rgb(255,0,255), grey is rgb(127,127,127)
  • HEX. Also sets values for red, green and blue. But, it uses hexagonal notation, which means a 16-base number system. This means nothing else than that the letters A – F are used for the numbers 10 – 16. This way, FF is 255.
    • Examples: Red is #FF0000, pink is #FF00FF, grey is #787878
  • HSL/HSB. An alternative that is more intuitive, and is popular among graphic designers. It sets the three components hue, saturation and light/brightness. I will go into greater detail on this topic later on.
    • Examples: Red is hsl(0,100%,50%), pink is hsl(300,100%,50%), grey is hsl(0, 0%, 50%)

The first and last notation also sometimes have an alpha component attached to them (which makes them rgba and hsla). This does nothing to the colour itself, but sets the opacity of the text/object it is used on. This means that the final colour will be a mix of the pure colour and the colours of the elements underneath it. It is used very often as an easy way to blend multiple colours. However, if possible, try to avoid setting an alpha (which means omitting it or setting alpha to 1) and create all colours by picking them out yourself. This gives more control and usually looks better.

ColourTheoryAlphaChannel

Also, this doesn’t mean that you should throw all colour names overboard. It is still useful to know at least the basic colour names (red, blue, pink, purple, orange, brown, etc.) and some of the advanced ones (maroon, olive, lime, navy, aqua, fuchsia, etc.).

Why? Say you’re working on a project for a client. He is not going to say ‘give that colour some more saturation’. He will be saying ‘I want that link to be more orangy’, ‘a beige-like background would be great’ or the even more vague ‘could you make it look more nature-like and sunny?’ You will need to know what they mean or are trying to say.

The LAB Model

On top of the colour models I've already mentioned, there's the LAB model. It isn't as intuitive or useful as the others, but it aims to solve one big problem.

This problem is the simple fact that colours have an inherent brightness. Red and yellow appear brighter than green or blue, even when you set it to the same level within the HSL model. Therefore, when you're trying to pick colours with the same level of lightness, you might accidentally get colours with lots of different levels of lightness.

The LAB model solves this deficiency by keeping the perceived lightness of a colour constant, which allows you to easily pick colours with identical brightness, and use colours across different media types. The first parameter stands for lightness, which you can set to a value between 0% (black) and 100% (white). The other two parameters, simply called a and b, represent all colours. The first is a slider ranging from green (-a) to magenta (+a), while the second is a slider ranging from blue (-b) to yellow (+b).

This model is often present in software applications, such as Photoshop, as it allows you to pick colours that remain constant across different screen and media types. More about that will be discussed later.

CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)