Colour in Everything
The subject of colour is quite vast and in some parts a complex one. But to start understanding how colour is created and used within CSS it's good to have a basic understanding of what Colour - Spaces, Gamut's and Models are. So lets start with a little colourful history.
Many years ago the International Commission on Illumination (CIE) measured and mapped out all physical colour wavelengths that are seen by the average human eye, such as light and hue. Then went on to describe them using just three colour values, creating the very first Colour Space. This original colour space was mapped out using red, green and blue wavelengths and was known as the CIERGB Colour Space.
This was later adjusted to also include some additional colours which they found needed a negative wavelength to represent their visible colours. Again this new colour space used 3 values for its mapping, this time using X and Z to represent the chromaticity of colour and Y for its luminance, they called this 3D co-ordinated system the CIEXYZ Colour Space, and its from this we can find any colour using just three values.
What's the difference - Colour Space, Gamut & Model?
Colour Spaces - Using the CIEXYZ system, further colour spaces can be mapped. With each space having a gamut of colours that it represents. For a long time in CSS there has been only the sRGB colour space available (or RGB as its more commonly referred to), but we now have more at our disposal such as Oklab and CIELAB, with many more accessible by using the CSS color() function.
Colour Gamut - refers to a range of colours that are found within a colour space. Though it is possible that a colour space can have multiple gamut's within it. Like Colour Spaces these too can be named such as - sRGB, Display P3 and Rec2020, this then helps define which range of colours are being referenced. Each colour space may have a different range of colours than another, and its gamut's can be referred to as a:
- Wider or High range gamut, this contains a larger range of colours.
- Narrow or Low range gamut, this contains a smaller range of colours.
Colour Models - in CSS are a system used to represent and define colours using numerical values. Usually a tuple is made up of 3 or sometimes 4 numbers within a pair of parenthesis, preceded by the chosen colour space name, e.g. rgb(255, 255, 255) also referred to as a colour function.
So how does CSS utilise these colour spaces, gamut's and models to add colour to our webpages elements?
Colour in CSS
To begin with, developers only had a very limited number of colour spaces at their disposal. As browsers could only recognise and render colours from within the sRGB colour gamut.
With only the use of these colour model formats and functions. hexadecimal numbers (hex), named colours like seagreen or ghostwhite, rgb(), rgba(), or keywords such as current-color.
/*---- sRGB colour values ----*/
.hexadecimal {
color: #000000;
}
named {
color: black;
}
.rgb {
color: rgb(0, 0, 0);
}
.rgba {
color: rgba(0, 0, 0, .6);
}
.keyword {
color: current-color;
}
Now with the introduction of high definition (HD) screens that can process a wider gamut of colours we are also seeing the introduction of new non sRGB colour spaces, syntax and tooling.
Luckily over the years browsers have continually developed to include support for these newer colour spaces, firstly hsl() in around 2010, followed by hex with alpha in 2017 and most recently hwb().
But even though we had these new colour spaces to choose from, which offered a much more accurate and uniform colour prediction across modern devices and screens, so far they were all still using the same sRGB colour gamut.
To enable us to utilise these newer colour spaces, CSS now has a whole bunch of Colour Functions which we will look at next.
Further Colour space Resources & Reference
Want to read more about the origins of colour spaces? Then we recommend checking out these blog articles, doc pages & YouTube videos from:
CSS Tricks - color everything in css by Juan Diego RodrÃguez.
Chrome for Developers - high definition css color guide by Adam Argyle.
MDN - Color Space
YouTube video The Ultimate Guide to Computer Color by ThioJoeTech
Page Last Edited: