Mixing Colours
Let’s go back to our earliest experiences of colour, when we were very young and had pots of paint to play with. What happened when we mixed yellow and blue paint?
When we mixed yellow and blue paint, we got a kind of green. Many artists are familiar with mixing paint colours, though it is a skill that takes time to develop. You may already be familiar with primary colours which are mixed to make other colours.
When computers create colours, they also mix primary colours. But there is an important difference we need to be aware of.
When we mix paint, the resulting colours get darker and darker. Mixing in more and different paints, gives us darker and darker colours, until we almost have black. In real life, we often end up with a muddy dark brown.
When we mix coloured light, the resulting colours get lighter and lighter. If we mix more and different coloured lights, the results will be lighter and lighter colours, until we get to white. Here’s a picture showing coloured red and green torches, not paint, being mixed.
You can see that when the lights overlap, we have yellow, a lighter colour than red or green.
So we’ve just seen two different ways in which colours combine
- Mixing paint results in darker and darker colours.
- Mixing light results in lighter and lighter colours.
Additive and Subtractive Colour
You don’t have to know why this is but it is interesting. White light is made of of a mixture of purer colours. You will have seen them separated out with a prism, or a rainbow in the sky, where raindrops act like prisms. Paint, pigments and dyes work by absorbing some of these parts of white light, leaving the remainder to be reflected back. Adding more, and different, paints means more of the elements of white light are absorbed, leaving less and less to be reflected. That’s why the results get darker. This is why mixing paints is called subtractive colour mixing.The subtractive primary colours are cyan, magenta and yellow. You may have noticed your colour printer mixes colours from inks of these primary colours.
Mixing coloured light is just that, adding together different parts of white light. Mixing different colours means adding more and more of the elements of white light. If we had all the elements of white light, we’d end up with white light! This is like the opposite of a prism or a rainbow. Instead of separating out the rainbow colours, we’d adding them in. That’s why mixing light is called additive colour mixing.
The additive primary colours are red, green and blue.
What is important for us, is to know that computer screens, like a laptop display, a smartphone or tablet screen, make colours by mixing red, green and blue light.
Computer displays are made of tiny little coloured squares called pixels. Those pixels are actually made of 3 smaller bits, which are teeny weeny red, green and blue lights. By turning on each of these three colours by different amounts, the pixel takes on different colours. So to make yellow, a pixel will have the teeny weeny red and green lights turned on, but not the blue light.
With Processing, we can mix these primary colours to make our own colours too. We can have very fine control over the exact colour we want.
So let’s look at some examples of mixing red, green and blue light to get a feel for how it works.
Let’s start at the top left. The first example shows only red light switched on. There is no green or blue light in the mix. You won’t be surprised that makes a red pixel! The next example along, is the same but this time the red light has been turned down to about half strength. This makes the resulting colour darker, not lighter, because there is less light overall. If we turned down the red to zero, we’d have no light contributing to the mix at all, and we’d end up with black.
The next row shows all three red, green and blue turned on about half. The important point here is that they are all turned on at an equal level. This gives us a mid grey. The next example is the same but this time the amount that all three red, green and blue are turned on is a bit higher, about three quarters of the way up. The result is a lighter grey. That’s because there is more light contributing to the mix. If we turned the levels up to the max, we’d get white.
The last row is more interesting. Here we show how light mixing creates different colours. Mixing red and green light makes yellow. How do we make it darker? Well, we’ve just seen how reducing the amount of light being mixed makes the result darker. So having levels of 50% red and green would create a darker yellow. That’s not a surprise, the first two rows show this happening. So here’s a more interesting question: how do we make the yellow lighter? Hmm. Well, we know we need to add more light somehow. We can’t add more red or green as those are already at the maximum level. The only option left to us is to add more blue light. It works! Think of like this. Red and green but no blue makes yellow. But an equal amount of all three makes a neutral grey. So we’ve just taken a light grey and added some yellow to it, to make a light yellow.
Don’t worry about being able to predict what colours will result from mixing red, green and blue light. You develop a feel for it over time, and even professionals don’t need to be able to do it without help. You can find many tools on the web, or in your favourite photo editing software.
Here’s a good tool for mixing red, green and blue, or just RGB, to make colours https://www.w3schools.com/colors/colors_rgb.asp. Here is the tool being used to make the darker yellow.
Have a play yourself, moving the sliders to add more or less red, green and blue elements. It’s quite fun mixing light to create colours. I really encourage you to do this, as this is the only way to start to get a feel for what combinations make which colours, and how light or dark they are.
0-255: Computer History
Did you notice that the tool shows the sliders going from a low of 0 all the up to a maximum of 255? Why isn’t this 0 to 100%, or maybe 0 to 1? Those would make sense. What sense does a top level of 255 make?That 255 is an antique from history. When I was little, in the 1980s, computers were much less powerful than they are today. The numbers they could easily store in their memory maxed out at 255. To have bigger numbers, they had to do complicated things joining bits of memory together. You may know that computers store only 1s and 0s, and eight of these can represent numbers from 0 to 255. Eight bits was the size of a normal memory store. That’s where the phrase 8-bit comes from. The red, green and blue colour levels were stored in memory that could only go from 0 to 255.
So RGB values going from 0 to 255 have stayed with us. Today, you’ll see this in your favourite photo editing software, tools like Photoshop, Krita, Gimp and many more. The following shows a tool I use. You can see the sliders and RGB values going up to 255. You can also see I’ve made a light yellow and used the paintbrush to make a light yellow mark.
This blog post is based on content for a book I'm working on: Make Your Own Algorithmic Art
No comments:
Post a Comment