sRGB is still the default colors space for web
This site is about artists' paints and colors. But what you see on your screen could be different than how a paint swatch looks under a desk lamp. Colors in your browsers are affected by many factors, and your tech stack (your monitor, your operating system, and your browser) is just one of them. I skip here the whole topic about how you calibrate your monitor (and your workflow) and concentrate on the browser part only.
The sRGB (standard RGB) color space was created back in 1996, and it's still the default color space for the web. Although most of the modern monitors and mobile displays are capable of displaying wider gamut than the sRGB can offer, web developers are still using the sRGB color space to define colors.
When anybody publishes an image on the web, the recommended way is to use the sRGB color space.
It's the most backward-compatible way, which means that the image will look correctly on
But technically it's already possible to present images with wider gamut even if it's not commonly
used. Most modern
browser can query the display's capabilities by
color-gamut and render images with
embedded color profiles accordingly.
I wrote about my scanning workflow in the Swatches section. In short, if your display supports, you will see a more accurate swatch.
Here are two examples: The same scans, exported to sRGB color space and Display P3 color space (on the right). The only difference is the color space, the images are the same, no other modification.
If you can see the difference, your display is capable of rendering wider gamut. You can test your setup capabilities here.
It's a slightly different story with defining colors. The only widely supported way to specify a color of a web page element is to use the sRGB.
The good news, CSS Color Module Level 4 is really close, it's already supported by some browsers: if you use the latest Safari (desktop or mobile), or Chrome (from version 111, March 2023), you can already use the new color definitions.
It offers many ways to define colors and proper color conversion. We will be able to specify colors in CIE L*a*b* format, in LCh, and even in Oklab! If you want to see how it looks like in practice, you can try to open the HLC Atlas Navigator in Safari and in normal Firefox. You will see that small swatches with slanted corner looks different.
These swatches look the same in Firefox but you will see the difference with Safari and in Chrome (version 111+).