www.TechEd.ca - COLOUR THEORY

www.TechEd.ca

Colour thory

Color Theory for Designers

Color theory is a science and art unto itself, which some build entire careers on, as color consultants or sometimes brand consultants. Knowing the effects color has on a majority of people is an incredibly valuable expertise that designers can master and offer to their clients.

There’s a lot to it, though. Something as simple as changing the exact hue or saturation of a color can evoke a completely different feeling. Cultural differences can compound those effects, with a hue that’s happy and uplifting in one country becoming depressing in another.

Warm Colours

Warm colors include red, orange, and yellow, and variations of those three colors. These are the colors of fire, of fall leaves, and of sunsets and sunrises, and are generally energizing, passionate, and positive.

Red and yellow are both primary colors, with orange falling in the middle (making it a secondary color), which means warm colors are all truly warm and aren’t created by combining a warm color with a cool color. Use warm colors in your designs to reflect passion, happiness, enthusiasm, and energy.

RED (PRIMARY COLOR)

Red is a very hot color. It’s associated with fire, violence, and warfare. It’s also associated with love and passion. In history, it’s been associated with both the Devil and Cupid. Red can actually have a physical effect on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too.

Red can be associated with anger, but is also associated with importance (think of the red carpet at awards shows and celebrity events). Red also indicates danger (the reason stop lights and signs are red, and that warning labels are often red).

Outside the western world, red has different associations. For example, in China, red is the color of prosperity and happiness. It can also be used to attract good luck. In other eastern cultures, red is worn by brides on their wedding days. In South Africa, however, red is the color of mourning. Red is also associated with communism.

Red has become the color associated with AIDS awareness in Africa due to the popularity of the [RED] campaign.

In design, red can be a powerful accent color. It can have an overwhelming effect if it’s used too much in designs, especially in its purest form. It’s a great color to use when power or passion want to be portrayed in the design. Red can be very versatile, though, with brighter versions being more energetic and darker shades being more powerful and elegant.

Build in Amsterdam’s website uses a vibrant red accent color that draws attention to the middle of the page immediately.

The bright red of the illustration on the homepage of Nacache Design’s site gives the page a ton of energy and vibrancy.

The muted red on the Startup Lab website is energetic without being aggressive

ORANGE (SECONDARY COLOUR)

Orange is a very vibrant and energetic color. In its muted forms it can be associated with the earth and with autumn. Because of its association with the changing seasons, orange can represent change and movement in general. Orange is also strongly associated with creativity.

Because orange is associated with the fruit of the same name, it can be associated with health and vitality. In designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.

Bitter Renter’s bright and bold home page takes full advantage of the energy that orange can provide to a design.

Christopher Kimball’s Milk Street’s subtle use of orange as an accent color shows it can be used in more elegant and conservative designs

YELLOW (PRIMARY COLOUR)

Yellow is often considered the brightest and most energizing of the warm colors. It’s associated with happiness and sunshine. Yellow can also be associated with deceit and cowardice, though (calling someone yellow is calling them a coward).

Yellow is also associated with hope, as can be seen in some countries when yellow ribbons are displayed by families who have loved ones at war. Yellow is also associated with danger, though not as strongly as red.

In some countries, yellow has very different connotations. In Egypt, for example, yellow is for mourning. In Japan, it represents courage and in India it’s a color for merchants.

In your designs, bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are commonly used as a gender-neutral color for babies (rather than blue or pink) and young children. Light yellows also give a more calm feeling of happiness than bright yellows. Dark yellows and gold-hued yellows can sometimes look antique and be used in designs where a sense of permanence is desired.

Deskpass uses a slightly darker yellow, giving it an eye-catching but slightly muted look

Kettle’s not-quite-true-yellow is lively and vibrant without being overwhelming.

Susa Ventures uses a goldenrod hue as an accent color in their typography to great effect.

Cool Colours

Cool colors include green, blue, and purple, are often more subdued than warm colors. They are the colors of night, of water, of nature, and are usually calming, relaxing, and somewhat reserved.

Blue is the only primary color within the cool spectrum, which means the other colors are created by combining blue with a warm color (yellow for green and red for purple).

Because of this, green takes on some of the attributes of yellow, and purple takes on some of the attributes of red. Use cool colors in your designs to give a sense of calm or professionalism.

GREEN (SECONDARY COLOUR)

Green is a very down-to-earth color. It can represent new beginnings and growth. It also signifies renewal and abundance. Alternatively, green can also represent envy or jealousy, and a lack of experience.

Green has many of the same calming attributes that blue has, but it also incorporates some of the energy of yellow. In design, green can have a balancing and harmonizing effect, and is very stable.

It’s appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence.

The Rhythm of Food’s site uses a bright kelly green that’s ideal for a site that ties together food and information.

HelloMind’s bright green background is youthful and gives a sense of growth (in line with their product for improving your brain function).

Anna Rosa Krau’s website has a soft sage green background, which works almost as a neutral for this portfolio.

BLUE (PRIMARY COLOUR)

Blue is often associated with sadness in the English language. Blue is also used extensively to represent calmness and responsibility. Light blues can be refreshing and friendly. Dark blues are more strong and reliable. Blue is also associated with peace and has spiritual and religious connotations in many cultures and traditions (for example, the Virgin Mary is generally depicted wearing blue robes).

The meaning of blue is widely affected depending on the exact shade and hue. In design, the exact shade of blue you select will have a huge impact on how your designs are perceived. Light blues are often relaxed and calming. Bright blues can be energizing and refreshing. Dark blues, like navy, are excellent for corporate sites or designs where strength and reliability are important.

The bright blue background of the Future of Design Survey results website homepage stands out, and is then used as an accent color throughout the rest of the site.

Versett uses a bright blue as the primary color on their website, along with a number of other bright hues to differentiate different sections.

Deep Mind’s website uses various shades of blue for its background, giving it a trustworthy, authoritative feel.

PURPLE (SECONDAERY COLOUR)

In ancient times, the dyes used for creating purple hues were extracted from snails and were very expensive, so only royals and the very wealthy could afford them.

Purple is a combination of red and blue and takes on some attributes of both. It’s associated with creativity and imagination, too.

In Thailand, purple is the color of mourning for widows. Dark purples are traditionally associated with wealth and royalty, while lighter purples (like lavender) are considered more romantic.

In design, dark purples can give a sense wealth and luxury. Light purples are softer and are associated with spring and romance.

The site for the One Shared House documentary uses a vibrant shade of purple and hot pink accents to give a sense of energy, creativity, and imagination.

Purple is the perfect hue for a creative endeavor like KIKK Festival 2016.

On Content Stack, reddish purple works great as an accent color against a neutral background, and draws attention to important page elements, like buttons.

Neutrals

Neutral colors often serve as the backdrop in design. They’re commonly combined with brighter accent colors. But they can also be used on their own in designs, and can create very sophisticated layouts. The meanings and impressions of neutral colors are much more affected by the colors that surround them than are warm and cool colors.

Black

Black is the strongest of the neutral colors. On the positive side, it’s commonly associated with power, elegance, and formality. On the negative side, it can be associated with evil, death, and mystery. Black is the traditional color of mourning in many Western countries. It’s also associated with rebellion in some cultures, and is associated with Halloween and the occult.

Black, when used as more than an accent or for text, is commonly used in edgier designs, as well as in very elegant designs. It can be either conservative or modern, traditional or unconventional, depending on the colors it’s combined with. In design, black is commonly used for typography and other functional parts, because of its neutrality. Black can make it easier to convey a sense of sophistication and mystery in a design.

Many of the images on Timothy Saccenti’s portfolio are dominated by black, which is also the color of the transparent menu, giving the entire site an edgy, modern feel.

The black hue used here along with the animation gives it an edgy, almost creepy feel.

Minimal design with black used as an accent color gives Heco’s site a super modern feeling.

White

White is at the opposite end of the spectrum from black, but like black, it can work well with just about any other color. White is often associated with purity, cleanliness, and virtue. In the West, white is commonly worn by brides on their wedding day. It’s also associated with the healthcare industry, especially with doctors, nurses and dentists. White is associated with goodness, and angels are often depicted in white.

In much of the East, however, white is associated with death and mourning. In India, it is traditionally the only color widows are allowed to wear.

In design, white is generally considered a neutral backdrop that lets other colors in a design have a larger voice. It can help to convey cleanliness and simplicity, though, and is popular in minimalist designs. White in designs can also portray either winter or summer, depending on the other design motifs and colors that surround it.

Black & Wood uses white as both a background and an accent color (in their typography, for example), giving the site a very clean feel.

Dwell uses white as an accent color on their splash page, a very unique but effective choice for something that includes a CTA.

The mostly white background of Nuno Coelho Santos’s website contributes to the modern aesthetic.

Grey

Gray is a neutral color, generally considered on the cool end of the color spectrum. It can sometimes be considered moody or depressing. Light grays can be used in place of white in some designs, and dark grays can be used in place of black.

Gray is generally conservative and formal, but can also be modern. It is sometimes considered a color of mourning. It’s commonly used in corporate designs, where formality and professionalism are key. It can be a very sophisticated color. Pure grays are shades of black, though other grays may have blue or brown hues mixed in. In design, gray backgrounds are very common, as is gray typography.

Dwell uses white as an accent color on their splash page, a very unique but effective choice for something that includes a CTA.

The gray background on the For Office Use Only website is so subtle it almost appears white, and gives the site a very modern feel.

Gray takes on a sophisticated yet down-to-earth feeling on the Shinolawebsite.

Brown

Brown is associated with the earth, wood, and stone. It’s a completely natural color and a warm neutral. Brown can be associated with dependability and reliability, with steadfastness, and with earthiness. It can also be considered dull.

In design, brown is commonly used as a background color. It’s also seen in wood textures and sometimes in stone textures. It helps bring a feeling of warmth and wholesomeness to designs. It’s sometimes used in its darkest forms as a replacement for black, either in backgrounds or typography.

Green Rebel’s website uses brown for much of their typography and graphics throughout, as well as in some of the textures, lending an organic feel.

The cream background and brown typography of Yasuhiro Yokota’s portfolio site is warm and earthy, while still serving as just a good a backdrop for design work as shades of gray.

Off & On Barber Shop uses various brown elements for the bulk of their site, giving it an old-fashioned feeling.

Beige

Beige is somewhat unique in the color spectrum, as it can take on cool or warm tones depending on the colors surrounding it. It has the warmth of brown and the coolness of white, and, like brown, is sometimes seen as dull. It’s a conservative color in most instances, and is usually reserved for backgrounds. It can also symbolize piety.

Beige in design is generally used in backgrounds, and is commonly seen in backgrounds with a paper texture. It will take on the characteristics of colors around it, meaning it has little effect in itself on the final impression a design gives when used with other colors.

The tan accent color used on this site is entirely unexpected and gives it a Mid-Century Modern look.

La Pierre Qui Tourne’s website uses a variety of shades of tan for their primary color palette, alongside some great brights for a very fun feeling design.

People Map’s website uses a more gold shade of tan, giving the site an upscale feel, especially when combined with the site’s typography.

IN SUMMARY

While the information contained here might seem just a bit overwhelming, color theory is as much about the feeling a particular shade evokes than anything else. But here’s a quick reference guide for the common meanings of the colors discussed above:

Red: Passion, Love, Anger
Orange: Energy, Happiness, Vitality
Yellow: Happiness, Hope, Deceit
Green: New Beginnings, Abundance, Nature
Blue: Calm, Responsible, Sadness
Purple: Creativity, Royalty, Wealth
Black: Mystery, Elegance, Evil
Gray: Moody, Conservative, Formality
White: Purity, Cleanliness, Virtue
Brown: Nature, Wholesomeness, Dependability
Tan or Beige: Conservative, Piety, Dull
Cream or Ivory: Calm, Elegant, Purity

TEST YOUR KNOWLEDGE: What's YOUR Color IQ?

https://www.xrite.com/hue-test

Color Oracle - Design for the Color Impaired - https://colororacle.org

Colorblind Web Page Filter - https://www.toptal.com/designers/colorfilter

Assignment #1 - Colour Activity

In this activity we are going to look at the impact colour has on brand identity.

Your task is to colour each logo and / OR background a different colour. Feel free to use multiple colours and shapes if you feel it is a good representation of that brand.

* TRY to think outside the box and not use the companies current colours. *

Under each logo you will write a brief explanation of why you feel this colour worked or did not work with the identity.

LOGO_COLOURING_PNG.png

The Psychology of Colour in Advertising

You may think that you have a single favourite colour but in fact you probably have several: your preferred colour will always depend on a specific situation. Just because a lady loves hot pink on her nails, doesn’t mean she wants to decorate her house in a similar vivid hue. In the home, most people automatically choose a colour scheme to suit each room. People may claim that seaside blues are their favourite colours and so decorate their bathrooms accordingly; but when it comes to the living area; their favourite colour is now a calming neutral beige. Regarding outfits, people also choose what to wear according to some unwritten rules: dark colours such as navy seem appropriate for formal meetings and wintertime, whereas pastels and whites are hot favourites for summer.

Even if people don’t think too hard about the colours they prefer, they are subconsciously programmed to associate certain colours with specific situations and emotions: and this is true for adults all over the globe.

Harnessing Colours in Advertising

Branding and advertising agencies think long and hard about colour before they choose what to use in a brand development programme or advertising campaign. By carefully selecting the appropriate colour, an advert can send out a powerful message to the viewer even before they have had time to read and understand what the advert is promoting.

Advertising agencies make it their business to understand the psychology of colour to enable them to use it persuasively in their designs. For example, everyone knows that red signals danger and that people automatically react to a red warning sign to avoid the hazard. Why is that? Evolutionary theories believe that early man learnt to associate red with danger: blood, uncooked meat, or the red face of an aggressive adversary. But does that mean that red is never to be used in an advert? Far from it, however as with all colours, an advert must be created with careful use of colour to ensure it sends out a positive subconscious message – one that is appropriate to what the company is selling and also to the target market.

Getting it wrong

Imagine visiting a new bank which you’re thinking of entrusting your savings to and finding the building decorated in soft pastel yellows and pinks. Does your gut instinct say go ahead with your savings plan or do you feel a little uneasy by the wishy-washy decor? And if a nursery school sends you a prospectus in sombre greys and blacks, do you really think that this would be a fun and stimulating place for little Billy to spend his toddler years?

Getting it right

There is no point in fighting against the subconscious messages that colours send out. Advertising agencies must harness the right colour for each campaign which must be perfectly in tune with the products being sold, and with the customers it wants to attract. Here’s the rundown on the messages that different colours send out and how best to use them in marketing campaigns.

RED

While red signifies danger it can be used to good effect in marketing campaigns which need to evoke strong emotions. Red is associated with passion and love but its strong intensity also signifies excitement, determination and courage. Here’s an example of how to use a rich dark red in a brochure design destined to appeal to those passionate about fashion.

ORANGE

Orange is also a dynamic and energetic colour but doesn’t have the danger overtones conveyed by red. It draws attention to itself for its lively nature and can be used successfully for modern adverts that want to stand out from the rest, or for campaigns with a youthful target market.

YELLOW

Yellow is bright, reminiscent of the sun and full of energy. It also signifies playfulness, amusement, curiosity and happiness making it an ideal colour choice for advertising children’s activities.

Darker yellows, bordering on gold, can give a feeling of prosperity and security and can be used to great effect for financial orientated organizations.

GREEN

Green is firmly linked with nature and the environment in most people’s minds. It is also associated with reliability, safety, stability, honesty and freshness. It is an excellent colour to form the basis of marketing material for companies concerned with the environment or financial matters.

BLUE

Blue is a colour which arouses trust in the viewer. It may be a little serious, but it also suggests success, depth, loyalty, calmness and power. This is why it is one of the most popular colours in corporate brands and designs. Banks, financial institutions and medical companies can always rely on blue in their advertising campaigns to send out the message that the consumer can trust them implicitly.

PURPLE

While purple isn’t really so different to dark blue, it sends out a whole new subconscious message to the viewer: it’s got the snazzy and daring edge on navy. Purple is associated with luxury, royalty, dreams, mystery and elegance. Light shades of purple are soothing and work well for beauty orientated advertising.

PINK

Pink is sweet, young and vulnerable. It will always be associated with femininity at a subconscious level making it a hard colour to use in advertising if the target market is anything but female. However a stronger and darker pink has the potential to hold its own against other traditionally non-corporate colours such as yellow, orange and purple.

BROWN

Brown is rarely seen as an exciting colour. However it is associated with nature and is seen as relaxing and casual. Colours ranging from mid beiges to chocolate browns lend themselves nicely to advertising for niche markets where brown is a dominant colour such as coffee and chocolate manufacturers, and pet services.

BLACK, GREY & WHITE

There is nothing more staid than the non-colours: black and white, and all of those greys in between. They depict traditionalism, conservatism and neutrality, and can be used very effectively in advertising. Organisations which want to portray themselves as completely trustworthy and serious, such as legal firms, may opt for black and white designs in their marketing materials. Some daring marketing campaigns may use a monochrome design purely to stand out from the colourful adverts of its competitors.

Colours are wonderful things: they can lighten up our lives and can infuse us with happiness; they can also excite us, calm us down or make us feel reassured and nurtured. Correctly harnessing the psychology of colour in advertising is a very powerful tool: when an advert has the right colour to match the services or products on offer, and one which simultaneously appeals to the correct target market, the advert will form the basis of a successful marketing campaign.

Assignment #2 - cupcake Colouring

In this assignment you will bring in the colouring sheet to photoshop and select 6 cupcakes of your choice. Copy those into a new Photoshop document and colour them in using the below colour theory learning.

Step 1) Start a Photoshop document that is 1800x600 pixels @ 300dpi.

Step 2) Colour 5 cupcakes using
- Monochromatic Colours
- Complimentary Colours
- Analogous Colours
- Triad Colours
- "Colour of your choice" - Emotional choice)

Step 3) Adding highlights and low lights to your cupcakes for more detail.

Remember to rename your photoshop layers, group them in folders and save your work as a ".PSD".

Step 4) Submit your completed colouring file into google classroom.

1. Introduction

Recently, colouring books for adults have become very popular – they are a nice way to relax and take a load off your mind. No previous knowledge is required to colour them at all – all you need is to time and the mood for colouring. Even professional artists have moments of creative block, and this type of exercise can help get the creative juices flowing again. So, whether you are a professional illustrator, or you haven’t coloured in years, this is a good exercise to have some fun, so head into Photoshop and start colouring!!

2. Styles

When it comes to colouring, there no single way to do it. I will explain three main approaches:

If you’re looking for simplicity, you may simply use flat colours. That means no shadows and no highlights. Just add the colour on the object using your favourite colour palette.

If you want to do something more elaborate, you may want to use shadows and highlights. In this case, here are two main approaches:

Cel shading (2) or toon shading consists of applying flat shades. It creates depth, but the style is that of a cartoon or traditional animation.

Soft shading (3): gradual shading that you can create with a shade gradient. In this case, the contours of the shades are much softer, and your rendering becomes more photorealistic.

3. Color Schemes

There are many options when choosing a color scheme. You can simply color to mimic real objects, even if they do not have any kind of chromatic harmony, or you can use a color scheme that is much more pleasing to the eye! Using a monochromatic color scheme, you get a single base hue and all its variations. By editing the saturation and the luminosity, you get many other shades. Remember not to change the hue or the color too much.

If you use an analogous colour scheme, you’ll get a wider variety of colors, and you can still use variations in their saturation and lightness. This scheme allows you to use a color and its adjacent ones in the colour wheel. In terms of tone variation, this is a subtler colour scheme.

To achieve a bigger contrast, you could use a complementary colour scheme, which consists of two colours that are on the opposite sides of the colour wheel. You can still use all their variations, but don’t overdo it. Try to limit yourself to a couple of variations per colour.

You can also use a triad or one of its variations to obtain a wider range of colors. The triadic colour scheme consists of three colours equally spaced around the colour wheel.

Once you have chosen the right colour scheme for you, it is time to move on to the colouring technique!!

4. Lowlights

If you are not sure where to place the shadows, pick a light source for the illustration first. Then, add the shades on the opposite side.

How do I choose the colour of the shadows?

If you’re using an analogous colour scheme (1) (as previously explained, colours which are adjacent to the base colour), or a complementary colour scheme (2) (colours on opposite sides of the colour wheel), see the examples here.

A quick technique to add shadows: Use the Selection area > Lasso tool to create a selection on the opposite side of the light source. Pay attention to the shapes of the different objects.

Once selected (making sure you have your previously chosen color selected too) press Alt + Delete on the layer you want to color the shades. This shortcut will automatically fill the selected area. Instead of using this keyboard shortcut you can simply use the Fill tool > Fill from the menu, as shown.
(G- Keyboard shortcut)

Set the layer mode to Multiply and lower the opacity if it is too dark.

If you prefer a softer shading, try using the Gaussian blur filter or the Blend tool to blur the edges of the shadow. It all depends on the style you’re going for.

5. Highlights

To add highlights, follow the same process as you did with the shadows. In this case, you can choose either a warm (1) or cold (2) hue and, in a new layer, start adding the highlights on the side of the previously decided light source.

In either light or shadow, you may add more levels to increase the light or the shading.

In order to get a flat highlight or shading, the best tools are either a hard brush or by filling a selection. On the other hand, if you want to go for a soft shadow or soft light, it’s better to use a soft brush or, alternatively, select the area as you did with flat/cel shading. Once the shading is done, apply Gaussian blur to the layer. This will blur and blend the edges, resulting in a more subtle effect.