Colormaxxing

What if I told you that #ff0000 or rgb(255, 0, 0) is not actually the reddest red you can have in your browser? I just learned that from this awesome blog post.

There is also an amazing color picker which I consider much more interesting than this post. It allows you to pick colors beyond sRGB in P3 and even Rec. 2020 color spaces. For photo comparisons try this.

What I found missing in the resources above was a simpler visual representation of what a “maxxed out” color would look like in sRGB and P3 color spaces.

In these examples, I have selected a wide-gamut P3 version of each primary and secondary color that puts them outside the classic sRGB color space. This is not even close to a scientific comparison, because different color spaces are different in a way that can’t be matched exactly. But it’s fun to see stuff beyond sRGB to pop out on your screen. Click the black boxes to see the difference.

Update: to get the brightest possible P3 colors I changed the notation from oklch() to color(display-p3 0 0 0) which is an easier way to reach maximum values.

As you (hopefully) can see, the difference is quite noticeable. We go beyond the boundaries of sRGB using the color(display-p3 0 0 0) notation which is the Display-P3 color space. You can use devtools to try and adjust the hex color of the left rectangle to match the right one, but you will never get there with hex or rgb. Let us try the same for green:

Pretty cool, although on my screen the difference is not as noticeable as with red. Anyway, let’s do the rest of them to wrap it up:

So yeah, that’s it. When you write background-color: red, it, unexpectedly, is not the reddest red you can get for your weird background needs.