inspireling design blog

I love colour! (Even though I’m currently sitting here, all in neutrals. My laptop bag is orange, does that count? :P)

As a designer I often get asked questions about colour, usually in regards to pairing, schemes, effective usage, etc. So, today I thought I’d do a little knowledge-sharing.
Colour Basics

So, everyone should remember from an art lesson or two, that the most basic colours: Red, Blue and Yellow are Primary Colours. You may not remember that colours you get from mixing the 3 basic colours: Purple, Green and Orange, are called Secondary Colours. The “in-between” colours such as yellow-green or blue-purple are created by mixing one primary colour and one secondary colour. These colours are called Tertiary Colours and are always called by their Primary colour first (ie. red-orange).

Colour Terms

Hue – is the term used for colour. Red is a hue, Blue is a hue, got it?

Value - The value is a measurement of the brightness of a colour. The brighter a colour is, the higher is its value and the more light it emits.

Tints – is when white is added, in varying amounts, to a hue.

Shades – is when black is added, in varying amounts, to a hue.

Tones - is when gray is added, in varying amounts, to a hue.

Colour Relationships

Monochromatic colour scheme is made by using shades and tints of one colour.Complementary

Complementary (Contrasting) colour scheme is made by using two colours which are directly opposite each other on the colour wheel.

Analogous colour scheme uses uses colors that are adjacent to each other on the color wheel. One color is used as a dominant color while others are used to enrich the scheme.

Triadic colour scheme uses three equidistant colours on the colour wheel. This type of colour scheme is quite stunning but can require a little more skill to achieve.

Split Complementary scheme uses one hue plus two others equally spaced from its complement.

Double Complementary (Tetradic) scheme is created by two complementary color sets; the distance between selected complementary pairs will effect the overall contrast of the final composition.

Types of Colour

RGB Color: This is color based upon light. Your computer monitor and television use RGB. The name “RGB” stands for Red, Green, Blue, which are the 3 primaries (with green replacing yellow). By combining these 3 colors, any other color can be produced. Remember, this color method is only used with light sources; it does not apply to printing.

CMYK Color: This is the color method based upon pigments. “CMYK” stands for Cyan, Magenta, Yellow, and Black (its what the K stands for). Using these 4 colors, most other colors can be achieved. This is the method used by printers the world over.

Pantone (PMS) Color: This is yet another printing color method. PMS stands for “Pantone Matching System,” and is a large list of specially mixed colors made by the Pantone Corporation. Instead of using CMYK to create colors, the pigments are created individually for purity.
Here’s a great Colour Theory Reference sheet that you should download and use!

Below is an infographic that lays out the basics of the perception and psychology of colour. My favourite  colour is any-hue-of-blue. Interesting that the very words to describe blue are some of the very same words friends have used to describe me (except masculine, lol). If you want to read more about the “meaning of colours” you should check out this article from Smashing Magazine.

Developing a colour scheme can be quite daunting to some people. If you’re like me you grew up learning “lies” about colour. Things like: “pink and red clash”, “brown and black do not go together” and “blue and green should never been seen”. These rules are junk. The truth is as long as your colour scheme falls into one of the colour relationship theories, you’ve got nothing to worry about. There are no wrong answers. If you’re a little hesitant to break out on your own there are some great web tools to help you.
Kuler is a tool that allows you to start with a colour and chose a colour relationship to build a scheme. You also have an option to upload an image and it will auto detect colours and create a scheme for you. You can also select random schemes, or pick through thousands of user submitted schemes.

Color Scheme Designer allows the user to define a colour and then chose a colour relationship to explore. I really like that it also shows variations of tone and shade. They also offer an option to export Photoshop palettes of your selected scheme. Super handy!

Once you’ve got your scheme created, try describing it to someone without showing them. I guarantee they will picture different colours then the one you are describing. Why? Because we don’t all define colours by the same name. Yikes, colour confusion! Below is a graphic created from the outcome of a survey in which 200,000 people named more than 5,000,000 random hues. This graphic only shows the top 200 colours names but it’ll still give you a great idea of how people define colours. Have a look at Fuchsia (found on both the left and the right), definite confusion on that one!

And to add to the colour confusion is gender. Yep, guys and girls describe colours very differently. If you click on the image below you will be taken to an interactive diagram that shows the preference of colour names by gender. This diagram was created from the same set of data as the above chart. This one shows that males prefer to refer to colours in their basic terms (red, blue-purple, etc.) and women like more descriptive terms such as pumpkin, dark lilac, peacock blue, etc. This doesn’t really surprise me, probably doesn’t shock you either… though the chart is a fun waste of time. :)

At the risk of voiding all that I just wrote, I’m actually of the mind that you can make any colour combination work, if you do it well.

So, don’t be afraid of colour. Embrace it, it’ll love you back, just as Inspireling does… I promise.