Tutorial 1-4 - Colour mixing

Contents

Colour mixing

Three dimensional chess

Why CIE space names are so confusing

The dimensions

Hue

Value, brightness, lightness or tone

Saturation, chroma, intensity or colourfulness

Four-part harmony

The basic flow

Hue

Value

Saturation

Set up

Lights, camera, action

Communications

Colour correction

Uneven lighting correction

Again in a little more detail

Save the project

• Part 1 - Starting a project
• Part 2 - The virtual palette
• Part 3 - The sketch
• Part 4 - Colour mixing
• Part 5 - Painting

Colour mixing

This overview of colour mixing using the Artist's Helper skips over many technicalities and caveats but it will be followed by further examples in more detail.

Once you become familiar with the process you will be able to skip most of the steps anyway.

…and before long you will be able to skip the Artist's Helper entirely. 😥

First we identify the colour we want to mix and create a palette entry for it.

Articles and tutorials entitled How to mix skin tones always seem popular so for this example I have sampled an area of skin from the rosy cheeks of my reference image:

#F9C0A6 Deep Peach

These are samples from a Starter Set of 5 Royal Talens Cobra water mixable oils on a pad of palette paper.

Next we arrange samples of our ingredient paints on our palette or on a card and load a photo of them into the Palette 2 tool tab.

Palette Load a palette image…

or drag and drop an image onto the Palette 2 tool tab.

We could apply the colour correction filter now but that will all be explained a little later.

The second row of samples is the same with a little white mixed in. Often paints straight from the tube look very dark in masstone and need a bit of lightening to increase the saturation so I always do a tint row. It wasn't really needed for these guys but it's a good habit. The black is from Winsor and Newton Artisan WMOs.

I found it surprising that mixing with white can increase the saturation of some dark, transparent paints but there you go. That's the beauty of having this kind of colour exploration tools.

For each paint select a sample from the photo to create a palette entry marked as an "available" colour.

Select is drag or click as in the main work area.

We can save this set of paints and reuse it in future projects so we won't have to do this bit again.

Palette Save the image palette as…

View the palette entries in the colour space widget. Use drag to spin and tilt the display to get a feel for the entries' positions in the colour space

Once you have completed this process a couple of times you will be able to look at this from a few angles and immediately see all the possible recipes in your head.

Before we go to the Mixing 6 tool tab we should make a couple of notes about colour spaces and the dimensions of colour…

Three dimensional chess

Colour spaces

These colour spaces are basically all the same but stretched and squashed to make various calculations easier. We don't need to understand their individual quirks. These images are only here because they're pretty.

RGB: red, green, blue

HSL: hue, saturation, lightness

HSV: hue, saturation, value

HCL: hue, chroma, luminance

HCV: hue, chroma, value

HSI: hue, saturation, intensity

CIE L*C*h°(ab)

CIE L*C*h°(uv)

CIE xyY

CIE xyY Chromaticity diagram

CIE is the International Commission on Illumination (usually abbreviated CIE for its French name, Commission internationale de l'éclairage). wikipedia

Notes on the dimensions of these colour spaces can be found on the colour page but we don't need such details to proceed.

Just pick one and stick with it.

RGB, HCL, CIELab and CIELuv are ok, but for one reason or another the others suck.
(They all suck but some suck more than others).

I always use CIE L*C*h°(ab).

Colour space Colour space select CIELAB L*C*h(ab) 1976

• it is an attempt at perceptual uniformity
• the distance between two colours is roughly proportional to their perceived difference (locally)
• it defines colours independently of how they are created or displayed
• it is device-independent (wrt a given white point)
• it is copyright and licence-free

Colours of the same hue angle don't always have the same perceived hue - but it's close enough.

From here on I'm assuming you are using it too.

Why CIE space name abbreviations are so confusing

Every article I've read has used slightly different abbreviations for the colour spaces.

Asterisks are sometimes added after the dimension initials as in CIE L*a*b*.
Wikipedia says : The asterisk (*) after L, a and b are pronounced star and are part of the full name, since they represent L*, a* and b*, to distinguish them from Hunter's L, a, and b, …

As they don't seem to mean anything and they are redundant when CIE is included so they are often left out.

They're also put in to the CIE L*u*v* space but I don't know why. Anyone? It may just be a hangover from the old CIE 1964 (U*, V*, W*) colour space on which it is based.

LCh inserted in any name denotes that polar coordinates are being used (chroma and hue) rather than cartesian coordinates. That doesn't change the space itself only its addressing.

The L dimension is the same either way it's the ab or uv cartesian parts going to polar Ch .

So we get CIE LCh(ab) and CIE LCh(uv).

If the dimension initials in brackets are missing they almost always mean ab .

Sometimes the brackets are missing and the space character is often dropped too. Sometimes the stars and the degree symbol and year are added and the capitalisation also varies.

The L dimension initial is (almost) always in uppercase but the av or uv are usually lowercase. The publication year can be appended, sometimes.

The order of the dimensions is sometimes changed to HLC.

So CIELAB ≈ CIELab ≈ CIELab76 ≈ CIE L*a*b* ≈ CIE L*C*h°(ab) 1976 ≈ CIELCH ≈ HLC.

HCL is something else entirely. Similar but different.

Hunter Lab is an old colour space but Luv Hunter is an old heavy metal band.

The dimensions

There are many ways to quantify colours. Some, such as the RGB and CMYK models, introduce dimensions based on how the colours are created with lights or pigments. Others, including HSL or The Munsell system, try to reflect how colours are perceived (with varying degrees of success).

The the latter group often include three dimensions to quantify:

Hue the angle around the central value axis.

The closest colour on the colour-wheel.

Hue: The attribute of a visual perception according to which an area appears to be similar to one of the colours: red, yellow, green, and blue, or to a combination of adjacent pairs of these colours considered in a closed ring ( CIE, 17-22-067 hue ).

Value, brightness, lightness or tone distance vertically parallel to the central axis.

A ranking of the amount of light present. Either as an absolute measure or in comparison to a similarly illuminated white.

Brightness is our perception of luminance (visible light energy),

Brightness: attribute of a visual perception according to which an area appears to emit, or reflect, more or less light. NOTE The use of this term is not restricted to primary light sources ( CIE, 17-22-059 brightness ).

Lightness: (of a related colour) brightness of an area judged relative to the brightness of a similarly illuminated area that appears to be white or highly transmitting NOTE Only related colours exhibit lightness. ( CIE, 17-22-063 lightness ).

Saturation, chroma, intensity or colourfulness distance radially from the central axis.

The perceived amount of difference from a grey of the same lightness. Refers to the purity of the colour. Colours produced by a single wavelength of light are considered more saturated than those produced by a mixture. With allowances for extra spectral colours which can't be produced by a single wavelength.

Chroma: colourfulness of an area judged as a proportion of the brightness of a similarly illuminated area that appears white or highly transmitting ( CIE, 17-22-074 chroma ).

Saturation: colourfulness of an area judged in proportion to its brightness ( CIE 17-1136 saturation ).

Four-part harmony

No matter how many paints we have available, any colour that can be mixed from all them can be mixed from a selection of just four of them.

This doesn't mean you only need four paints in total just that no attainable target colour needs more than four ingredients. Limited palettes are discussed elsewhere. Resist the temptation to mix more than four paints because it complicates matters and can lead to the dreaded land of mud. Adding a fifth is just admitting that you chose the wrong four to start with.

Great, which four? Choose a pair of saturated colours whose hues are either side of our target's hue, plus black and white.

Why? We need a pair that are either side of our target's hue, a pair that are either side of our its value and a pair that are either side of our target's saturation (in the direction of the hue).

These pairs don't need to be orthogonal to each axis but it helps.

Black and white will always be either side of our target's value. If we choose a sufficiently saturated pair of paints either side of our target's hue then our initial mix will be of higher saturation than the target (hopefully), so black and white can make a grey of the target's value to desaturate the mix. Black and white give us control of both value and saturation with just two paints. There are other options but these are the easiest.

Numerous artists like to minimise their use of white and many don't use black at all. Their concerns (milky contamination, opacity, deadness…) are discussed elsewhere.

Most white and black paints are a tiny little bit blue. You may need to add a little more of the warmer of the two hue colours as you lighten or darken the mix. But then again, maybe not.

Colour isn't the only consideration when choosing ingredient paints. Opacity, viscosity, drying time and archival properties factor too but are much lower on the list of my priorities.

I generally like naturally opaque paints as it is easier to lower opacity than increase it. I can lower their opacity and change their viscosity by adding mediums, but I rarely feel the need. I like as low a viscosity as possible and yet still have the paint opaque and stay where I put it.

The Zorn palette is a great example what can be done with this sort of four part mixing. He favoured yellow ochre, vermilion, lead white and ivory black.

These four gave him a gave him access to a good slice of the colour pie, particularly good for skin tones in portraiture and nudes.

He also used cobalt blue and other colours too but he's famous for favouring just those four.

The basic flow

Perform all the following steps virtually in the application in order to develop a plan. Then perform them again for real when actually mixing the paints.

We can take photos of the trial mixes as we go and import them into the application to ensure we are on target and to help us adjust a little if we are not.

One thing at a time

When mixing paints we can greatly simplify things by focusing on one of dimension at a time.

My ordering is hue first, then value, then saturation (justification below).

Many artists say they mix for value first. Certainly value is the most visually important dimension and the one that needs to be most accurate but that doesn't mean you should do it first. They are always going to lose the value a little when getting hue and saturation right. You can do whatever you like, but my way is best.

I do like a value-first underpainting but that's a different story.

Hue

We start by choosing a pair of ingredient paints which have hues either side of the target's hue and create a mixing line from them.

If we have a choice of ingredient paints with similar hues we should choose ones with higher saturations than the target that have the nearest values.

Select the two ingredients and press M to create a mixing line in the Mixing 6 tool tab.

Colour space Mix ⌘M

You can see the mix 1 icon is at the same hue angle as the target colour (51°, albeit darker and more saturated).

Adjust the ratio of the ingredients until the mix has the same hue as the target.

The further apart the the ingredients are in their hues the more likely we are to lose some saturation in the mix. So it goes.

This is why you shouldn't try to mix saturated greens from blues and yellows.

Repeating this step with real paints will be easy as it is simply adjusting the relative proportions of two paints.

The real mix for specific paints may not follow the exact path shown in the colour space widget. But as long as the colours are not too far apart it will be pretty close.

But it is always going to be a continuous line connecting between the two ingredients. It will definitely pass through the right hue at some point.

The mix's hue can be checked by eye initially and then, when we are close, we can take and load photos to see where we are and which way to nudge our mix.

No need for any precision at this stage though.

Value

Next we can select a lighter or a darker ingredient to adjust the value.

If we use black or white then we won't change the hue too much and then need to correct it again later.

Initially we want to paint opaquely so Titanium White and Ivory Black are good choices to give the mix some covering power.

Many artists like to mix their own chromatic blacks. This is understandable for painting dark shadows which are rarely true black but often the original reasoning gets lost and the don't use black evangelists start preaching that you shouldn't use it for mixing and shouldn't even have black in your armoury at all.

Idiots.

A good explanation can be found here: Mixing with black paint . Note that we haven't just added black to the full light colour that already has the saturation set.

Adjust the ratio of the ingredients until the mix has the same value as the target.

Again, when we repeat this step with real paints we are just doing a one dimensional proportional mix. As long as the value of the target is somewhere between those of the end points we are definitely going to go past it at some point.

Note that we're losing saturation as well as changing the value. So it goes.

Having the hue drift a bit is inevitable (Colours sharing the same Lab hue angle do always not share the same apparent hue Lindbloom ) (true of any of our available colour spaces).

If we do get a little change in hue we can nudge it back with one of our initial pair of ingredients but it's unlikely to be big enough to worry about.

Saturation

Next we would normally adjust the saturation. This is almost always a case of reducing it by adding a little grey of the same value. This is because the our ingredients for the hue were saturated paints straight out of the tube.

In this particular example I'd like to increase the saturation a little. Unfortunately I don't have any ingredients that could do it.

If I had a paler yellow available I could have used it to increase the value rather than white. The cyber yellow that I have got can't be used because I would have had to add more international orange to correct the hue and I'd be back where I started. With a pale yellow I could probably correct the hue and still made a little profit on the value.

In fact if I had a paler yellow I would have used it from the beginning anyway.

As I haven't got one it is a moot point. I know I can't do any better with what I've got and that is a very important piece of knowledge. It stops me getting frustrated attempting the impossible.

Never mind, it is very close anyway.

Saturation is the least critical dimension and the difference is smaller than the variation in the colour of the areas in the reference that the paint is going to be used for anyway.

When we are reducing the saturation by adding a grey we should put a little of the mixture aside so that if we go too far we can use it to increase the saturation again.

If we do need to increase the saturation again we should consider adding some of the desaturated mixture to the saved higher saturation mix rather than the other way round.

Finally I added a tiny bit more red to bring the hue back.

Studio set up

During a project we may take dozens of photos of our paints and of our canvas and load them into the application. If we can set up our environment to do this slickly it will save us effort in the long run.

This is all optional but highly recommended. I did several paintings successfully before sorting all this stuff out. This is just where I am now.

In order to get consistent, accurate colours in our photos we can either:

• shoot in a consistently lit environment using consistent manual camera settings
• or include known reference colours in our images and colour correct the images in the application.

The first choice may not always be possible, for example, if we are working in a naturally lit environment or outside or if we are using a camera or phone without full manual settings.

The second choice requires including a card with reference colours in the photo which may not always be available. There is also a little more to do in the application when loading each photo.

I use both methods. I use the first choice for getting my paint mixes approximately right and the second for a final check before using them. Similarly I use the first for the initial painting stages and the second towards the end to correct and check.

Lights, camera, action

I like to paint with my canvas vertical on an easel. I've set my camera up on a tripod behind me and a lamp at 45° to the canvas either side. I mix my paints on a glass palette on a desk to one side then put samples on a card on the easel to take photographs.

Some artists mix their paints with their palette attached to the easel, vertically, so their mixing is done in the same light as their painting. They only sparingly add any medium at the last minute as they use the paint. I'm changing to this method. I like it a lot and haven't made too much of a mess. Yet.

If you like to paint horizontally on a desk the whole setup might be easier if you can get the camera high enough.

A fixed mounting point would be ideal but standing on tip-toes and shooting down can works well enough.

My study has shutters to keep the variable daylight out and a couple of cheap 5500k, high CRI lamps to ensure consistent lighting. I use a camera with manual settings which I set once and then use for every shot.

It is best to set the camera with a picture of average lightness sitting on the easel rather than a new white canvas. Not that it matters that much.

I store the settings in a memory slot so I can get them back after using the camera for other stuff.

This setup will give us consistent colours rather than accurate colours. If the lighting was from incandescent light bulbs then that would give a warm light which would lead you to mix cooler colours and the painting may end up with a cooler colour bias. This isn't as much of a problem as you might think but it's usually easy to obviate anyway. Use daylight rated bulbs or LEDs with a colour temperature of around 5500k and you should be ok. Or, if you already know where the painting is going to be displayed you could try to repeat the same lighting.

While you are at it look for bulbs with a high Colour Rendering Index - CRI. Bulbs with a high CRI percentage produce light at wavelengths throughout the spectrum. A low CRI bulb may emit the same colour light but from a more sparse selection of wavelengths. The gaps in such light might cause some paints to look different than in full daylight. Read about metamerism on the colour page.

There is nothing to stop you using a flash when taking photos, but I haven't tried it myself. Avoid automatic power settings or through-the-lens metering which may introduce variation between shots.

Communications

It is good if we can get our photographs to our computer quickly and simply.

My camera has WIFI and can talk directly to my laptop. Setting it up is a bit of a pain though and using it prevents me streaming music at the same time so I prefer to use a USB cable between the two. The software that came with the camera ( Imaging Edge Remote ) allows me to control it and take photos from the laptop and have the image file automatically transfered.

Anyone using any other camera or phone will have to figure out the best way to transfer the images themselves. Sorry.

The Artist's Helper can monitor a directory and can automatically load the photo as a canvas or palette image as soon as it appears so you don't have to do it manually.

Miscellaneous Monitor image directory
Miscellaneous Monitor destination palette ⌥⌘P
or
Miscellaneous Monitor destination canvas ⌥⌘C

I have my laptop on a table beside the easel. I can take a shot without going back round to the camera and have it appear in the application straight away.

So long as I remember to stand to one side when I'm doing it. I have taken several nice pictures of my own back.

Colour correction

This section is a bit complicated and isn't really necessary. Just have good, consistent, white(ish) lighting on your palette and canvas and skip this bit.

If we cannot get good, consistent, white lighting, then we should perform colour correction on the photos of our palettes and canvases. We need to include something of known colours in the photos and then process the images to make the colours of those items correct.

Level 1

At the simplest level we can place a single neutral coloured item, such as a sheet of white paper or a photographers grey card, next to the palette or canvas before we shoot. This should tell us the colour bias. Load the photo into the app and create a temporary palette entry from the object. With this entry selected we can run the colour correction filter for the whole image to make this area a true neutral.

Filters Palette Colour correction
or
Filters Canvas Colour correction

The temporary palette entry can be deleted afterwards.

Level 2

To get a little more accuracy we could place black and white reference objects in the scene and create two temporary palette entries from them. This will allow the processor to scale the channels until the selected entries have become true black or white. This type filter will be done if you run the colour correction with two palette entry selected.

The difficulty here is finding objects that are black or white enough! The darker one will be assumed to be black and the lighter one white (or the configured preferences).

Level 3

Finally we could place references of known colours into the scene such as the colour checker cards below. We can configure the application with these colours and process the image until those areas match the configuration.

I have been using an X-Rite ColorChecker Passport. But they are not cheap so I'm going to switch to this, three buck, Gray Scale & Value Finder instead. I only used the greyscale row in the X-Rite anyway.

Details on colour reference products can be found here: colour checkers .

The colours to be used need to be configured in the preferences.

If you have the X-Rite ColorChecker Passport or the Gray Scale & Value Finder then life is easy as I've added menu items to configure the colours I read from my cards with a Colourpin scanner.

Miscellaneous Set reference colours XRite Passport references
Miscellaneous Set reference colours Gray Scale & Value Finder References x 4
Miscellaneous Set reference colours Gray Scale & Value Finder References x 6

I'm happy to add menu items for other products if I'm sent the details. I am going to add some for the free brochures of some commonly available paints. Their colour printing has to be pretty consistent. Get your free colour reference cards from hardware stores, yay.

When we import a photo of a palette or canvas that includes a colour reference card we click on the known colours to create palette entries. These entries need to be selected when we run the colour correction filter.

Filters Palette Colour correction
or
Filters Canvas Colour correction

There should be the same number of entries selected as there are configured reference colours but the order doesn't matter.

If you do click it will create the entries and add them to the selection in one go.

The correction algorithm is currently a linear scaling which doesn't take the images gamma correction into account. I may enhance it one day but it already works well enough for our purposes.

As soon as the filter is complete press DELETE as you won't need those palette entries again.

XRite Passport

Miscellaneous Set reference colours XRite Passport references

The only colours I use on the Passport is the row of six grey cells (the bottom row in the picture above ).

#fefcf7

#d4d7d6

#acafaf

#818483

#5d6262

#3e4241

 colour_correction_references_000 = 0x3e4241
 colour_correction_references_001 = 0x5d6262
 colour_correction_references_002 = 0x818483
 colour_correction_references_003 = 0xacafaf
 colour_correction_references_004 = 0xd4d7d6
 colour_correction_references_005 = 0xfefcf7

Gray Scale & Value Finder

Miscellaneous Set reference colours Gray Scale & Value Finder References x 4

This reference card has ten entries which is overkill for our purposes. I like to use just the four corner values.

VALUE 1 #494643	VALUE 10 #eff0ec
VALUE 2 #615f5e	VALUE 9 #dddfdc
VALUE 3 #777776	VALUE 8 #cfd1ce
VALUE 4 #8a8b89	VALUE 7 #c0c1bf
VALUE 5 #9c9d9b	VALUE 6 #adaeac

 colour_correction_references_000 = 0x494643
 colour_correction_references_001 = 0x9c9d9b
 colour_correction_references_002 = 0xadaeac
 colour_correction_references_003 = 0xeff0ec

Values 5 and 6 are very close to each other but if I only used one of them I'd have to remember which one it was!

If you feel short changed that the XRite folks have more data points then you could use the middle ones too:

Miscellaneous Set reference colours Gray Scale & Value Finder References x 6

VALUE 1 #494643	VALUE 10 #eff0ec
VALUE 2 #615f5e	VALUE 9 #dddfdc
VALUE 3 #777776	VALUE 8 #cfd1ce
VALUE 4 #8a8b89	VALUE 7 #c0c1bf
VALUE 5 #9c9d9b	VALUE 6 #adaeac

colour_correction_references_000 = 0x494643
colour_correction_references_001 = 0x777776
colour_correction_references_002 = 0x9c9d9b
colour_correction_references_003 = 0xadaeac
colour_correction_references_004 = 0xcfd1ce
colour_correction_references_005 = 0xeff0ec

If you have any other colour reference cards you can configure them yourself via:

Miscellaneous Edit preferences ⌘,

Their order doesn't matter as they are sorted by luma in the application. They don't all have to be greys like above but don't use colours which are too close in value/luma or they may get confused.

Uneven lighting correction

Avoid using this if you can. This is only needed if your canvas or palette is lit badly and is brighter one side than the other. It is much better to correct the lighting than use this filter but sometimes that is not possible. Details can be found here.

Again in a little more detail and with actual paint

It is a good idea to mix a few practice colours before mixing any colours required for the painting.

At first it will take a long time to mix each colour. If you are working with acrylics you may not be able to mix more than one or two at a time without having problems with them drying out. Chances are you are trying to be too accurate. It's important to get the values right but you have much greater leeway with the hue and saturation.

You will soon get quicker don't worry.

Whilst we are doing colour mixing it is more convenient to view the colour space widget in the left hand side of the screen instead of in the tool tabs on the right. This way we can see both the Colour space 2 and either the Palette 2 or CS options 5 or Mixing 6 tab at the same time. Do one of:

View Left pane Colour space ⌃2
or
View Left pane Show tabs ⌃T and then choose the Colour space 2 tab.

Here I've made a mix line for every pair to give an indication of the edges of this palette's gamut. We won't be able to mix colours outside of the polyhedral that these mixing lines define.
So we're not mixing a #32CD32 Lime Green or a #FF00CC Hot Magenta from this palette. The #F9C0A6 Deep Peach target colour can be seen to be just outside the gamut for these paints.

I could have done Colour space Usability items 2 Selected entries gamut instead to show the gamut but it's not as pretty.

Make sure the appropriate entries are being shown in the colour space widget. Select the checkboxes in the CS options 5 tab or check the menu items

Colour space Show palette entry names Available
Colour space Mixing entries Target
Colour space Mixing entries Ingredients
Colour space Mixing entries The mix point

Having chosen the colour we want to mix we can set it as the target colour. Select it in the table then:

Colour space Set the target colour ⇧⌘M

This will set the target label in the Mixing 6 tab, and highlight the palette entry in the colour space widget. The target colour is also shown on the mix sliders along with the current mix value colour for easy visual comparison.

Paints already marked as "available" can't be set as a target.

We already created a set of palette entries from a photo of our paints laid out before. Save the palette entries for the current palette image so that they can be reloaded for use in other projects.

Palette Save the image palette as…

Paints for saturated colours are (hopefully) high in pigment and low in filler when straight out of the tube. This means they can be both dark and/or transparent in masstone. When laying out a card with samples we should also put out a couple of mixes with a little white as they may actually be of higher saturation and be more representative of how they will be used.

In the example images you can see I've corrected the suggested names to be the names from the tubes. I put the original suggested names in the notes for no important reason. I saved the entries to Talens-Cobra.palette for later re-use.

If we have loaded other photos into the palette tab since they were created we can reload the image by showing and then double click on the source column in the palette entry table.

TODO show more colour mixing. Maybe a colour string too.

Save the project

We should note that this mixing method doesn't create a painting with the same colours as the reference subject image. What it does create is a painting that, when you take a photo of it, the photo has the same colours as the reference image. This difference is negligible. It can even be argued that it is a good thing as it is likely that more people will see photos of the painting than the painting itself.

At the end of every page save the project again.

Project Save as… ⇧⌘S

Jump to the next exciting installment when we focus on actual painting in: Tutorial 1 part 5