Colour spaces is the name given to the collective of a set of colours that can be produced. Colours on a screen are usually made up of variations of red, green and blue.
With the introduction of new colour spaces, you can now develop interfaces with a wider variety of shades. The days of seeing a different shade on your monitor to your high resolution smart phone are starting to change
Colour spaces vary depending on the way these colours are set on an x,y and z axis, thus depending on the way light is interpolated on that plane. Certain colours in certain colour spaces are not visible to the human eye.
This colour space allows a range of colours to be produced on large screens such as TVs. It is an RBG colour space. Certain colour spaces will take into consideration gray areas, black and white shades etc. as well as red, green and blue specifically.
At the moment the gamut of most monitors is P3 and from Lea Verou’s post, it’s stated CSS can’t access all the colours within some of these colour spaces.
This is when you specify within CSS the type of gamut you intend on using.
@media (color-gamut: srgb) {
p {
background: #00ff00;
}
}There are 140 colour names within CSS and they all have hex equivalent values. The main colours that have a variety of shades include, black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal and aqua.
Here are a few examples of them in use:
.nameOne {
color: blue;
}
.nameTwo {
color: teal;
}
.nameThree {
color: darkgray;
}
.nameFour {
color: purple;
}This colour space is probably one of the most familiar and common name spaces used on the web. The hex has includes six characters, a mixture of numbers and letter, and makes up two parts of each red, green and blue.
div {
color: #ff0000;
}RGB stands for red, green and blue. This is a longer form of a hex colour value. In the example given above, the colour is red in hex. Below is the example of the same colour but in red, green, blue form.
div {
color: rgb(255, 0, 0);
}As mentioned above, a wider gamut means more colours. P3 extends on sRGB. To enable P3, you can use the color() function. It is advised that you use rgb as the fallback when using P3 colours, as not all devices and browsers will have full support at the time of writing this post.
Below you can see the difference between named colours and P3 colours. Depending on the display you view these colours from, they will look either more vibrant than the named colours or around the same.
See the Pen P3 by ummadev (@ummadev) on CodePen.
LCH stands for lightness chroma hue. It is designed to represent the spectrum of human vision. The lightness within LCH can alter the colour drastically. It is worth noting that the chroma is not 0-100.
This colour space is almost identical to LCH however it adjusts the blue hues shift as the chroma/lightness changes.
See the Pen LCH and OKLCH by ummadev (@ummadev) on CodePen.
HSL stands for hue, saturation, lightness. Hue is the position of the colour wheel and can span from 0 to 360deg.
See the Pen HSL by ummadev (@ummadev) on CodePen.
These are device-independent colours. The first parameter specifies the lightness, the second is the green to red shade and the third is the blue to yellow shade.
The colours on the green to red and blue to yellow scale can be positive or negative.
See the Pen Lab by ummadev (@ummadev) on CodePen.
HWB stands for hue, whiteness and blackness. The hue can range from 0 to 360deg. The whiteness and blackness is a percentage, if equal amounts of black and white, the colour becomes grey. Think of hwb like mixing paint.
Safari have been supporting P3 for a while, as well as other colour spaces. Chrome has recently made the shift to include the new colour spaces in their dev tools; their handy colour picker allows you to see the line between rgb and the colour space. Firefox are almost there, though from what I have read they have upped the red on the displays of their website to make everything look brighter, so it kind of defeats the object of colour spaces.
From the little reading I have done around accessibility, it seems HSL is fine however LCH is the way to go forwards at the moment.