Browsers

How colors are displayed in your browser

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.

Images

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 most devices. 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.

sRGB JPEG
Display P3 PNG
sRGB JPEG
Display P3 PNG

If you can see the difference, your display is capable of rendering wider gamut. You can test your setup capabilities here.

Color definitions

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 close, and even if it is still a working draft, it's already supported by some browsers: if you use the latest Safari (desktop or mobile), or Chrome Beta with the experimental web platform features turned on.

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 Chrome. You will see that small swatches with slanted corner looks completely different.

H235_L050_C060, out of sRGB color, color definition is in clamped to sRGB value #008BE5
H235_L050_C060, out of sRGB color, color definition is lab(50.0% -34.41 -49.14) with sRGB fallback
H065_L075_C090, out of sRGB color, color definition is in clamped to sRGB value #FF9D1F
H065_L075_C090, out of sRGB color, color definition is lab(75.0% -38.03 81.56) with sRGB fallback

These swatches look the same in Chrome but you will see the difference with Safari.