Colour interaction
A colour is almost never seen as it physically is. Its appearance depends on what surrounds it, what you looked at a moment ago and how light or dark it is next to its neighbours. These studies follow Josef Albers' Interaction of Color (1963): try each effect on screen, then repeat it with paper or paint.
Colour is relative
Josef Albers taught colour at the Bauhaus, Black Mountain College and Yale. Interaction of Color reverses the usual order of colour teaching: instead of starting from theory and wheels, it starts from observation. Students work with sheets of flat coloured paper (Color-aid), so that texture and brushwork cannot interfere, and set colours against each other until they can make one colour look like two, or two look like one.
His point for studio practice is that the colour you mix on the palette is not the colour you will see on the canvas. The same paint changes when it is surrounded by a warmer, darker or more saturated neighbour. Judge colour in context: test a mix against the passage it is going into, not against the white of the palette.
How the maths on this page works. Colours are treated as sRGB and converted to CIELAB (D65 white). L* is perceived lightness (0 black to 100 white), so every greyscale view here uses L*, not a simple average of red, green and blue. Differences between colours are given as ΔE00 (CIEDE2000): below about 1 is invisible side by side, 2 to 3 is just noticeable, above 5 is clearly different.
Screens vary in calibration and brightness, and a sheet of paper under daylight behaves differently again. Treat the numbers as a guide and your eye as the judge.
- Simultaneous contrastNeighbouring colours push each other apart: a colour looks lighter on a dark ground, and shifts towards the complement of its surround.
- Successive contrastAfter staring at a colour, the eye adapts and you see its opposite (an afterimage) on the next thing you look at.
- Hue, value, chromaHue is the colour family (red, blue); value is lightness; chroma or saturation is intensity, from grey to fully saturated.
- Colour temperatureA relative quality, not a fixed one: a colour reads as warm or cool only in comparison to what is around it.
- EquiluminanceTwo colours of equal value but different hue. Edges between them look unstable, and they vanish in a greyscale photograph.
One colour looks like two
Both small squares are exactly the same colour. The grounds make them look different. Choose a study or set your own colours, then press Reveal to join the two squares with a bridge of the same colour.
Studies
Colours
The smaller the inner square, the stronger the effect: more of what you see is ground.
Two colours look like one
The reverse study. Adjust the right-hand square with the sliders until it looks the same as the left-hand square on its own ground. When you are satisfied, press Reveal: the grounds are removed and the two squares are put side by side, with the real difference measured.
Challenge
Right-hand square (HSL)
Change the grounds and target colour
Afterimage: successive contrast
Stare at the black dot without moving your eyes while the countdown runs. When the field turns plain, keep looking at the dot: a ghost of the shape appears in roughly the opposite colour. The cones that were working hardest have adapted, so the plain field briefly looks tinted with their opponent colour.
Shape
Colour
Plain field afterwards
Afterimages are brief and faint; blinking can make them flicker back. A grey field shows the pure opponent colour; a coloured field mixes with it.
Colour temperature is relative
The centre tile is the same colour in both groups. Among warmer neighbours it reads as cool; among cooler neighbours it reads as warm. Painters use this constantly: a grey can be made to glow warm or recede cool purely by what is placed next to it.
Test colour
Value vs hue
Hue grabs attention, but value (lightness) carries the structure of a picture. Decide which pairs below are the same value, then switch to greyscale to check. Greyscale here is computed from CIELAB L*, which follows perceived lightness.
Vibrating edges
Complementary colours of equal value produce edges that shimmer and seem to move, because the eye's luminance channel finds no edge while its colour channels find a strong one. Bring the lightness difference to zero to see the effect at its strongest, then view it in greyscale: the pattern disappears.
Pattern
Colours
Colour B is the complement of A (hue + 180° in CIELAB). If a colour falls outside the screen's range its chroma is reduced, keeping its L*.
Studio exercises
Classic Albers studies to do with coloured paper (Color-aid, sugar paper, magazine pages cut into flat areas) or with gouache or acrylic painted flat. Paper is better for a first attempt: you can try twenty candidates in the time it takes to mix one.
- One colour as two
Find one small piece of colour and two grounds that make it look as different as possible. Cut two identical inner squares from the same sheet. Try light against dark first, then two grounds of equal value but different hue.
Look for: which ground change moves the inner colour the most, value, hue or saturation?
- Two colours as one
Choose two grounds, then find two different inner colours that look identical on them. The colour on the darker ground usually needs to be darker; on a red ground it needs to be redder.
Look for: how far apart the two inner colours are when taken off their grounds.
- Afterimage in the work
Stare at a saturated shape for 30 seconds, then look at white paper. Paint or cut the afterimage colour you saw and place it next to the original.
Look for: whether your painted complement matches the opponent colour the eye produced.
- Vanishing boundaries
Place two different hues side by side and adjust one until the edge between them almost disappears. Photograph in greyscale to confirm equal value.
Look for: the edge softening; this is how to make forms merge in a painting.
- Illusion of transparency
Two overlapping rectangles, A and B, where the overlap is a third, separate colour chosen to look like a mix of the two. Make B appear to lie on top of A, then find a middle colour that makes A appear on top.
Look for: how the overlap colour's value decides which layer seems in front.
- Warm and cool
Make one neutral grey read as warm in one study and cool in another, only by changing its surround. Then do the same with a green or a violet.
Look for: temperature shifts in your own paintings when you repaint an adjacent area.