There are lots of colours available to us, and for the most part, we describe colour in a way that makes it difficult to see the relationships between different colours. Names like red, green, blue, yellow, purple and maroon are great for conversations about colour but provide little insight into the structure of that colour. From the moment we can talk, colour is processed by the language part of our brains and its meaning is tied to the names we give colours.
Win clients & work smarter with our FREE ebook: get it now!
Dimension, on the other hand, is processed differently by our brains. One foot and three feet aren't called different names. Instead, we measure dimension in a way that's proportional to a constant and well-known increment like inches or centimetres. These ideas of measurement come naturally to us and, while colour can be measured and described in a similar way, it's often very difficult for us to understand and manipulate colour as a measurement of its parts.
It wasn't until Sir Isaac Newton did a series of experiments with prisms in the 1600s before we really started to understand that light was made up of different colours that could be measured independently of one another. Colour wheels were soon adopted by artists so they could better understand and mix colours.
See Scott's demo of everything he discusses in this tutorial here
While most artists use red, yellow and blue as primary colours, and most colour theory classes refer to these as the primary colours, science has evolved since the days of Isaac Newton and so has our understanding of how we see colour. Just about everyone's eyes contain various light receptors. Receptors called rods detect darks and lights, and cones detect three primary colours: red, green and blue.
These three primary colours probably sound familiar to those of us who work on the web because this is how we write colour. Monitors have red, green and blue parts to every pixel. Each colour has 256 variations in brightness resulting in a total of 16,777,216 different colour possibilities. We can describe colour with the RGB colour function rgb(255,115,0) or hex values #FF7300, both of which describe the same colour in a slightly different way.
Thinking about relative colour
To start thinking about colour and its relationships we can start with the CSS colour function hsl(). This function breaks colour down into hue, saturation and lightness. Hue is expressed in a unit-less degree (out of 360) while saturation and lightness are expressed as unit-less percentages (out of 100).
So hue is expressed as a value out of 360. This value is mapped to a colour wheel. As you are spinning through hue values, imagine spinning around a colour wheel. If you have red (0) and you want to make yellow, you would just move hue to 60 . In colour theory there's the concept of complementary colours, which are two colours on opposite sides of the colour wheel. To find a complement of red you would just need to find the value that is 180° around the wheel from red. In this case 0 for red plus 180 and the resulting colour is cyan.
Saturation and lightness is a bit more straightforward. Fully-saturated colour (100) has no grey in it while a saturation of 0 is greyscale. With lightness, 0 is black and 100 is white. Adjusting these values up and down will make your colour lighter or darker. Because our conception of colour is usually tied to the hue of a colour, it's much easier to think about saturation and lightness in terms of scale.
Next page: colour manipulation on the web
