Testing for wide gamut

Many new devices and displays support wide gamut colour spaces — colours can be purer and more vibrant than previously. The phrase “wide gamut”, is a comparison between a colour space that includes more of the visible spectrum than sRGB and other “standard gamut” colour spaces.

These new abilities come with additional complexity — using wide gamut colours requires some understanding of colour management. the correct settings in your design tool of choice, and changes to how colours are used in your code.

However, even if you’re designing for a wide gamut colour space, like Display P3, many of the colours you use will likely still be within the sRGB colour space, and therefore may be easier to implement as sRGB (this is especially true for CSS, where wide gamut support is still very limited).

Converting Display P3 to sRGB #

ColorSync Utility is bundled with macOS, and it holds an impressive suite of colour space inspection and wrangling abilities. The calculator tab converts from one colour space to another, so it can be used to convert Display P3 to sRGB, and also check if a Display P3 colour is inside sRGB’s gamut.

Using ColorSync Utility’s calculator tab, setting the left side to Display P3 and the right side to sRGB lets you convert a Display P3 colour to sRGB. Turning on Extended Range makes it easier to see clipping — if a value is outside the 0 to 1 range, it’s not in the colour space’s gamut.

Shades of grey #

As an interesting aside, the white point, black point and transfer curve are identical in Display P3 and sRGB. That means black, white and all shades of pure grey are identical. They’re the exact same raw values in Display P3 and sRGB. If you’re using black or white or grey, you don’t need to check — the colour can be implemented as sRGB, if you’d like.

Automated gamut testing #

Testing colours one by one, to see if they can be represented in sRGB is a huge hassle, if you have a complete design to check. Thankfully, the process can be automated with full images so you can test your entire design at once. I’ve created a Photoshop action for this purpose. Running it with a document open flags regions that are outside sRGB’s gamut.

The image above is a wide gamut wallpaper I created. Running the action results in the image below — black areas are within sRGB. Anything shown in red, green or blue is outside sRGB.

The sRGB Gamut Test Photoshop action used above is now part of the free and open source Bjango Actions. I hope you find it useful.