Three presentations on Colour Theory… “Everything You Know About Colour is Wrong” series.

Everything You Know About Colour is Wrong 1 is  basic colour theory:
Everything You Know About Colour is Wrong 1

Everything You Know About Colour is Wrong 2 is  expanded colour theory:
Everything You Know About Colour is Wrong 2

Everything You Know About Colour is Wrong 3: Colour Harmonies is  colour harmony and how to build one:
Everything You Know aBout Colour is Wrong 3

Because life is colourful,
Daxx

Ps. Comments would be appreciated.

If you live in Victoria BC and you are a graphic designer looking for work or clients, you need to know this.

Avoid Mayhem Marketing (scufflinks.ca), at all costs.

Mayhem marketing is owned and operated by Jeremy Green and Josh Mitchell. They are a pair of 30-something scam artists looking for an easy buck. If you do ANY work for them, get it in writing first or they will find a way to cut you out so they don’t have to pay you. If they can find a way to not pay you, they will use it.

Protect yourself by writing up a contract and make sure they sign it before you do any work for them, and not before. A signed contract is legally binding by law and 100% admissible in a court of law. List out everything they ask of you and if they add new items, generate a new contract and have them sign that too, before you start.

Remember, they are scammers and their company is not reputable.

There are hundreds of scam artists in Victoria trying to squeeze designers for work, especially web pages; and this is just another one, poisoning the landscape.

You’ve been warned.

If you’re asking “what is it?”, then you’re like most people. What you may not realize is that you use colour harmony every day. You just have no idea that that’s what you’re doing. You do it when you get dressed and match your shirt with your pants, socks, shoes, belt and tie; or when you decide which flowers to plant in your garden and imagine how all the colours will look when they’re grown. You do it when you put your makeup on (for those that wear it) and you do it wherever colour choices are involved. Every time you buy a new shirt, you always think about which pant you can pair it with. You’re thinking about the colour harmony.

Artists and designers do it all the time. Artists will chose colour combinations that control eye movement in their compositions. Web designers do it to make colours work together in a web page or graphic. Colour choice is so important to anyone working in web design. It affects everything and can be the deciding factor of whether your web design works or fails in its intention. People in advertising know about colour harmony. They use it to convince you to buy things and it works. They know that an ad created in striking colour harmonies will not only catch your attention, but provoke you to read it. That’s one foot in the door, for them and you have no idea how many times you’ve fallen for it.

So okay, what is it exactly?
Colour harmony is organizing colours in a pleasing manner following the rules of harmonic colour and there are 10 of them. It’s pure aesthetics at its basic level. Before anything is created, it’s figuring out which colours you will use. You need at least two colours to build a harmony, but you can start with one as a base colour. Everything else has to do with the relationship that colour has to all the others, and where they fall on the colour wheel.

LEGEND
These colour schemes are built using the 12-hue colour wheel, also known as the artist’s colour wheel. The first colour wheel shows the harmonic rule in its purest form. The second wheel displays the same rule with the inclusion of tints (addition of white) and shades (addition of black). There are obviously hundreds more colours available to use, but for the sake of simplicity I’ve reduced the black and white variations to 4 hues per colour. The last group of colours are the colours chosen. Each of these images enlarges by clicking on them.

The 10 different types of colour harmonies can be placed into 2 families.

1. Related color harmonies - A colour scheme which utilizes a single hue or similar hues

ACHROMATIC
A colour scheme that contains various shades and tints of whites, blacks and grays, but no colour.

MONOCHROME
A colour scheme of a minimum of three hues, which uses one base colour with individual tints, shades and tones of that colour.

ANALOGOUS
A 3 colour scheme which makes use of adjacent hues in which there is an identifiable common hue (e.g. yellow, yellow-orange and orange). Or at least 1/4 of a colour wheel. This object of three colours spins around to any three colour selection of the same intensity and can move in (adding white) and out (adding black) while retaining its structure.

2. Contrasting colour harmonies – Colour schemes which use two or more hues, with at least one warm and one cool colour.

CONTRASTING
This colour scheme uses 2 hues which are not related and not quite complementary, provided the scheme includes one cool and one warm hue usually includes a hue which is one step away from the complement. (e.g. yellow and blue-violet). This object spins around to any two colour selections with one hue always to the left or right of its complement. It can also move in (adding white) and out (adding black) while retaining its structure.

COMPLEMENTARY
A colour scheme that uses 1 colour plus it’s opposite on the colour wheel. This object spins around to any colour, it’s complement should be directly opposite.  It can also move in (adding white) and out (adding black) while retaining its structure.

DOUBLE COMPLEMENTARY
A colour scheme that uses 4 hues, including two adjacent hues and their respective complements. (e.g. yellow, yellow-orange, purple and blue- purple. This object spins around to any four colour combination hues. It can also move in (adding white) and out (adding black) while retaining this structure.

SPLIT COMPLEMENTARY
A colour scheme that uses 3 hues which include a base hue and the two hues on either side of its complement. This object spins around to any three colour combination hues. It can also move in (adding white) and out (adding black) while retaining this structure.

TRIAD
A colour scheme that uses 3 hues which are each 1/3 around the colour wheel. This object spins around to any three combination hues, while retaining this structure. Each arm can move in (adding white) or out (adding black). The two arms that are not the base colour can move independent of it while retaining this structure. Moving the base hue in or out, adjusts the two other hues proportionately.

TETRAD (aka Double Split Complementary)
A colour scheme that uses 2 base hues which are 1 colour apart and include their complements. (e.g., red, green, yellow and purple). This object spins around to any four colour combination hues. It can also move in (adding white) and out (adding black) while retaining this structure..

So, now you know what designers know about colour harmonies, but how do you use that information to generate harmonies? Typically, artists and designers use colour wheels to figure out colour harmonies that work. I myself have used wheels similar to the second wheel containing tints and shades with center pieces that spin around, similar to the objects used in the first wheel. Today, most of us will use digital software or websites that do exactly the same thing. Here are some examples.

Many of you will probably have heard of Kuler at Adobe.com. It’s a great idea and you can specify harmonies based on monochromatic, traid, complementary, compound, shades and custom. These are all 5-colour harmonies that begin with a base colour. You can create and save your harmonies online and then download them as an Adobe Swatch Exchange (ASE) file which can be imported into any Adobe product.

One of the best ideas at kuler was adding keywords to the swatch selections. I’ve always seen colour selection as something organic and keyword searches adds the words that most people will use to describe colours. This means you can search for other swatches using descriptive words like “spicy”, “vanilla”, “corporate” or “summer”. It’s free to create an account and it costs you nothing. Even if you don’t use the ASE files you can generate, you can always go back to your colour selections and visually match them to swatch books onscreen.

Here’s walk-through of building colour harmonies based on a single hue, using Kuler.

I started with a single hue… cobalt blue. I imported a Flickr image I found by searching for “cobalt blue”. I wasn’t concerned with any other colour in the image. This was the first set of colours it pulled from the image. I named it CobaltMint and made the blue my base colour. This is considered a custom mix because it doesn’t follow any harmonic rule.

Once that was done, it was easy to edit my swatch as a new set. From here, you click on any rule to generate a harmonized set of hues.

Analogous – Download the swatch here from Kuler
or here from COLOURlovers.

Monochromatic

Triad

Complementary

Compound

Shade

Kuler is by no means perfect. I’ve listed, what could be reduced down to, 7 traditional colour harmonies near the beginning of this post. Kuler really fulfills only 4 of them. Harmonies can be between a minimum of 2 colours (as in a complementary colour harmony), but Kuler wants a minimum of 3 colours to be able to share it in the public realm. You can create them, you just can’t share them. The lack of contrasting, double complementary, split and double split complementary, triad and tetrad colour harmonies is a little disheartening. It means if you were learning this stuff, you’d only be learning half of what you should know. Another thing is it cannot select colours from an image and then re-adjust the hues to their closest match following a specified colour harmony. The compound and shade rules they offer… I’m not sure how they could help anyone trying to figure out colour harmonies.

Here’s something else I found at Kuler. Take a look at this colour combination. According to Kuler, they are analogous to each other.

I so disagree with this. If yellow is my base hue, how can this blue be analogous to yellow when it contains no yellow whatsoever? Something’s rotten in the state of Kuler, methinks. Which means if you use Kuler for colour theory, do it at your own risk. It’s clearly not as perfect as everyone would like to think. I’m not one for sitebashing, but please don’t promote this as a learning tool, escpecially when it comes to colour theory.

Harmonies from the desktop
One of the best pieces of software for generating colour harmonies from the desktop is ColorSchemer Studio 2, available in mac or pc flavors. It’s easier to save your selections in groups and re-organize them in any way you see fit. It also goes one step further than Kuler, with the addition of being able to to create split complement, tetrad and triad harmonies. You still can’t generate contrasting, double or double split complementary harmonies, but that may come in time. You can use the HSB sliders to add white (S) or black (B) or change the hue altogether (H). That’s flexibility that Kuler doesn’t offer. You can also save your swatches as ASE files just like Kuler and because it’s from the desktop, it’s far faster than Kuler. You can also select more than 10 colours! The harmonies are still single-hue based, but ColourSchemer is still far and away easier to use than Kuler.

For me, ColorSchemer is crack. It’s loaded with lots more features such as the interactive layout preview where you can drop swatches onto heading and type and boxes to see what they will look like, LiveSchemes, ColorMixer, Contrast Analyzer, the Randomizer, Make WebSafe function, the built-in ScreenPicker that allows you to select a colour straight from your screen, variations and not to mention the ability to flip between RGB and CMYK! Like I said, far and away…

Look! This is ColorSchemer allowing me to select more than 10 hues! I started with the 10 it selects from the image and then after modifying some of the hues, added them manually. There are 15 colours here! I can add or delete them as I see fit. I can import all of them into whatever I’m working on and try out each one before I keep or delete it. That’s the kind of flexibility I love in software. Because it’s standalone, I can do this anywhere without going on the net. To be clear, these colours do not follow any harmonic rule, they are simply sampled from the image, but each colour can be saved and then a harmonic rule can be applied to them later to build a set of harmonic swatches.

Another great feature is it’s connection to COLOURlovers.com. It’s an entire web community of people who love colour. ColorSchemer allows you to connect to their website and download or your harmonic creations. You can also join their forums and just yak your heart out about colour, and who wouldn’t want to do that? Everyone has a viewpoint about colour. The community over at COLOURlovers is huge. It’s about fashion, design, web, print, home, patterns, swatches, and palettes… all to do with colour. They even have a great section on colour trends. It’s life, living with colour! What amazes me about this site is the scope of people that go there. Just like life!

Because life is colourful

In 1917, Munsell founded the Munsell Color Company. His colour-order system is known as CIE which is an abbreviation of International Commission on Illumination (Commission Internationale de L’Eclairage) located in Vienna, Austria. This system of colour is the same system that is used in most graphic applications and colour monitors.

These attributes are listed here.

HUE
Hue is the name of the colour family to which a colour belongs. A red-orange which would have more red than orange, would belong to the family of reds, and so its hue would be considered red.

A word about colour gamuts: Gamuts refer to any device or software that can generate colour. A gamut is the range of colours that they see or produce. Your eyes see in RGB as do most devices, such as camcorders, video, television and your computer monitor. People who work in print, work in the CMYK gamut (Cyan-Magenta-Yellow-Black), which is named for each of the colour plates that are used in printing. The CMYK colour gamut is contained within the RGB gamut. This means that all CMYK colours can be made in the RGB gamut, but not all RGB colours can be made in the CMYK gamut. This is also why your computer monitor can display CMYK colours without the aide of software or hardware. For people who work in colour, it’s important to realize that some of the more brilliant and intense colours available in RGB, cannot be created in things like paint or print. People who work on the web, on the other hand, work in RGB and have the full RGB colour gamut at their disposal. Anyone who has converted  colours (or re-assigned colour profiles), can attest to the fact that the first thing that changes is the intensity and brilliance of RGB colours to CMYK. Those colours are converted to their closest match within the CMYK gamut.

VALUE
A value of a colour is how dark or light a colour is. The value of any colour can be altered by adding white, creating a tint (which raises the value), or black, which creates a shade (which lowers the value).

CHROMA
Chroma refers to a colour’s purity. The stronger or brighter a colour is, the higher its chroma. The weaker or more mixed a colour is, the lower is it’s chroma. You can alter the chroma of a colour by adding white, grey, another colour or black. Chroma is also called saturation.

CHARACTERISTICS OF COLOUR
There are also 7 characteristics of colour that can affect any colour composition. These are listed below:

ADVANCE OR RECEDE
Colour has the ability to advance toward a viewer or appear to recede away. The rule of thumb has been that warm colours advance and cool colours recede. Think of it this way… warm colours as in those in sunlight and the blues in your background that create depth.

APPEAR WARM OR COOL

Colour temperature is strongly linked to colour depth. The same rules apply here. Warm colours appear to have a radiant heat and cool colours appear to generate a coolness.

Here’s the controversy regarding warm and cool colours: Many people can’t make up their minds which colours should be considered warm or cool. This is an argument that’s been raging for centuries. Some people quite simply, split the colour wheel in half into warm and cool. Others apply a general rule of any colour that contains red, is considered warm. Personally, I don’t believe any of this.

Green has the ability to be warm (lime) and cool (aquamarine). And you know what? So does magenta. The above colour harmony was created using the middle magenta hue as a base. The intent was to create a colour harmony that evoked a cold feeling, which it does. My point is that both magenta and green straddle the warm-cool boundary. They are the only ones that have that ability. This is why I see them as intermediate colours that can blend into warm or cool.

So really, the split between warm and cool is more like this…

APPEAR HEAVY OR LIGHT
Rich, saturated colours can appear heavy and heavily tinted colours can appear light.

CREATE MOVEMENT
Colour can create movement by changing tonal values.

SYMBOLIC
Although this characteristic is strongly linked to geographical location and culture, there are very basic symbols that cross cultural borders such as blue representing sky or red representing fire etc.

CREATE ILLUSIONS
Paint a small room in dark, dense colour and the room will appear smaller, paint it in a pastel colour and it will appear larger.

You can see it happening here. The red square on the left appears larger than the one on the right. It seems to be almost bulging. The black square on the right seems a little smaller and the red seems to somehow swell. The more radiant (saturated) a colour is, the more it will “swell” or appear larger.

ENHANCE SHAPE AND FORM
A red outline around any dark shape on a light background will soften its edge without blending it in. The red outline enhances (reduces) the shape’s contrasting edge. At the same time, colours that gradate to white (or a distance colour) on the edge of a shape will enhance the form by creating more depth.

Because life is colourful

As a painter and illustrator, I like colour charts. I’m fascinated by them, strange but true. Most people know of the basic 6-colour chart. Inaccurate if anything. In my world, I use 2 “blues” and 2 “reds”… cyan, blue, red and magenta. I use cyan because blue and yellow won’t make a green, but cyan and yellow will. I use magenta because red and blue wont make violet, but magenta and blue will.

This is the basic 6-colour chart that most people are familiar with. I’m here to tell you this is completely wrong.

Below is what you would actually get if you mixed these primaries (yellow and red, red and blue, blue and yellow) together. Tell me there isn’t something horrifyingly off here. Why do we teach this wheel to our kids when it clearly is so wrong in the first place? No wonder so many people grow up afraid of colour in North America.

How do you get a cyan, a hot pink or a bright green? You can’t. As you can see, they don’t look like anything like they’re supposed to look. It’s also the reason why if you google “color wheel” in the image section of Google, the resulting hits have colours that are all over the place. The greens are either too electric or too dull, most colour wheels don’t even have magenta or cyan in them and the blues are so out off-base, there’s no way you could mix a violet from them. In most cases, the colours have actually been “fudged”. And it’s not just on the net. It’s everywhere people are teaching colour theory.

Here’s one sold as a “guide to mixing color”. Many creative people are familiar with this one as are most art students. The first thing I notice is its actually a 6-colour wheel (3 primaries, 3 secondaries) with tertiaries.  The second thing is if you were to point to all the major colours not including tertiaries, you should see a logical pattern… like skipping over every other colour all the way around the wheel. But you don’t. Starting at yellow, you skip over yellow-green to get to green, skip over blue-green to get to blue, skip over blue-violet to get to violet and then from there it falls apart. The next colour red-violet. If you skip it, then you’re omitting a purple from your collection of major colours… but you’ve been skipping over every other colour when you started. Do you leave it out? This discrepancy is because there is no magenta in this wheel.

If you take an even closer look, you’ll also notice that some of the major colours are wrong… primaries and secondaries. Violet is actually blue, blue is almost cyan but contains too much magenta. There is no way you could make this particular red violet using this red and violet. Even the yellow contains too much magenta in it to mix these oranges. The primary green appears too blue which puts all its mixes into question as well. Let me show you what I mean.

The small circles outside the wheel are the actual colour mixtures you’d get if you were to use this colour wheel. The mixtures that this chart claims to make are clearly wrong. In some cases (red-violet, blue-green, red-orange) very wrong. These colours have been inaccurately stated here. The bars running around the rim are the corrected colours showing how far off the samples are. The blue has too much red in it to work as a primary colour. (The whole idea of a primary colour is that it is pure, with no other colour in it… a colour that cannot be mixed from other colours.) Their blue is more of a mixed colour, than a primary. Same is true for violet, red, yellow and green.

Finally, and perhaps most importantly, there is no magenta in this wheel. Without magenta, how is their violet plus their red supposed to produce that red-violet? It’s impossible. The small circle shows you what you would really get instead. But wait a second, we’re not talking about the six basic colour wheel that they teach to kids here. This is sold to art students! And it’s clearly wrong! Again, these colours have been fudged. They are not in any way accurate colour mixtures.

This is my colour wheel. Designers and artists know it as the artist’s colour wheel. You can easily see how blending one colour with another two doors down would result in the colour shown. It makes perfect sense and each colour can clearly be imagined blending into to one another to create the appropriate hue it should.

Now this colour wheel should make (visual) sense. You can clearly see how you can now move through this colour wheel to reach the next (logical) hue.

This is what we should be teaching our kids. The 6-colour basic wheel is nothing more than bunk and nonsense. I say if you’re going to teach anyone colour, teach it properly and include magenta (and cyan) in the lesson. Magenta and cyan occur in nature so we know the colours exist naturally. Having said that, I realize that what the Wiki definition is really saying; is that when we split white light using a prism, magenta doesn’t show up as a separated colour. In fact, it doesn’t show up at all. That’s because magenta doesn’t have a wavelength attributed to it. I get that. I also get that some people refer magenta as an imaginary colour because of it. But I don’t buy it.

That’s like saying that we’re all imagining the same colour at the same time. It cannot be imaginary if other people are seeing the same thing as you are. That sentence simply does not make sense to me. It’s also possible that its just poorly labeled. I think its because magenta’s wavelength is possibly too low to register like the other colours in the spectrum or that we simply haven’t come up with the best reason why this is. To call it imaginary or that it doesn’t exist as a colour is simply, in my mind, misleading in an already misled, misinformed and misunderstood subject.

In my world, magenta is a clear member of my colour spectrum. It exists because I can see it in nature. I can even paint with it and I’m pretty certain the tube said “Magenta” and not “Warning: This is not a real colour. Please use your imagination.”

All I know is without it, I can’t create certain colours which  makes me believe these colours couldn’t exist without it (take that Wiki!) So I refuse to call it imaginary, wavelength or not. I say teach everyone the same colour wheel, the same colour theory. Don’t fudge the colours in printing just because you don’t believe enough in your own product. Colour theory is easy. It’s not complicated. Understanding it is easy as long as you are being taught what really happens in nature. It should make sense and not be polluted with someone’s (incorrect) idea of what he or she thinks we’ll be able to grasp. People are smart… and colour is easy.

Because life is colourful.

Colour influence occurs when one colour spectrally changes or alters another. Most commonly, highly saturated colours can do this. In painting, strongly pigmented hues like Ultramarine for example, lying next door to an orange like Cadmium, can change the intensity to either dull it down to a light brown, or shift it more towards the magenta, creating an optical salmon. This is an effect that Mark Rothko used in his famous paintings such as this one…

Note: Even though Rothko was classified as an abstract expressionist, he hated the term and classified himself as an “abstract painter”. I personally place him squarely in the realm of colour field painting.

In the sample above, you can clearly see how Rothko took great care in choosing each hue. Even the background is selected with great care and to great affect. The purple cast plays a primary role here and makes the Burnt Sienna tones “pop” due to the yellow in the sienna reacting with the background. The dark Prussian blue which is mixed with just enough green to give the colour a greenish cast, making it pop as well, because it’s also reacting to it’s dark plum background. The top bar, painted in muted reds, browns and violets has bits of red, making it link to the red in the background analogously and stabilizing the two lower bars because optically, it appears just slightly larger than the other two bars below it. The overall effect is that of enhancing and punching up color hues a notch or five.

The after-image effect is related to colour influence but on a more physical side. The after-image effect is something that happens to everyone on a bright sunny day. When you look at the sun and then go indoors, you are momentarily blinded. The rods and cones in your eyes are fully saturated with so much colour, you can’t focus for the first few seconds. Coming in from the brightly lit outdoors, the inside of your house will appear in shades of blurry grays and blacks. A few seconds later your eyes clear and you can see again. What you were seeing is actually the opposite colour to the brilliant colours from outside.

You can make it happen too. Above are two images. If you block the other images and stare at the first blue image with the green chair for 30 seconds and then do the same to the red image, you’ll see the effect. The result is actually quite predictable.

You should see a pink glow around the blue chair as you stare at the second image. That is the after-image effect. Your eyes are trying to adjust to seeing more saturated colour than they can handle by creating the effect. The pink is exactly halfway between these two colours so you see a pink or magenta glow around the green chair.

This colour wheel matches the RGB gamut used in the images above it.

Partitive colour is something we’ve all seen before. We see it in printing when printers use coarse screens and it’s the basis behind the short-lived pointillism movement in painting from the 1880′s. Also known as retinal mixing, it’s what happens when you look at small points of pure colour blended with other points of pure colour. Your eyes create the intended colour by optically mixing. It’s a remarkable effect when you think about it. Interestingly, you can’t stand close to these images to see the effect, but far away. (Think comic books of the 60s or Roy Lichtenstein).

Here is what you’re actually seeing. The first image is a close-up, the second is from viewing at a distance and the third image is what your eyes “think” they are seeing.

In printing, this is an example of a typical application of partitive colour. To see this image clearly, take three steps back.

Because life is colourful.

They are in CMYK and I’ve added keywords to define them. They are in one complete ai file because to be honest, I couldn’t be bothered setting them all up in swatches. There are 16 sets of 12 combinations each. And as a word of warning, the file uses a generic CMYK colour profile.

Here is  a sample of one set of swatches per category.

Also here is a screen cap of the illustrator file itself…

You can download the file here.

Because life is colourful.

The file is in a zip format, unpack, install and enjoy. Don’t say I never gave you anything. <smirk> Below is a screen cap from Photoshop.

Things to remember: Designers know about CMYK. They also know that as a colour gamut, it’s very small. CMYK is the colour sphere that offset and laser printers work in.  On the other hand, painters work in rgb. In fact everything in the natural world works in rgb and it’s colour gamut is immense. Web designers work in rgb and they know that not all colours in rgb can be made in CMYK. Usually you loose the intensity and brightness when you convert and in some cases, there are significant colour shifts.

So how does this apply to the 107 pigment colours in this exchange file? Well, these colours were sampled in RGB and should really remain in RGB to maintain their integrity. There are hues within this swatch collection that cannot be created in CMYK, so convert at your own risk.

Because life is colourful.