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 for this new color space which I consider much more interesting than this post.

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

In these examples, I have manually picked a “stronger” 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.

As you (hopefully) can see, the difference is quite noticeable. We go beyond the boundaries of sRGB using the oklch() notation which is the new Oklab color space and lets us specify P3 colors. 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.