From sRGB to Display‑P3 and beyond

A color space defines:

• how colors are encoded (numbers → actual colors)
• which colors are even possible to display or print

For the web, the important ones are:

• sRGB – the long‑time default for the web. Designed in the 1990s to match typical CRT monitors.
• Display‑P3 – a wider‑gamut RGB space similar to what modern cinema and Apple displays use.
• Other wide‑gamut spaces (Rec. 2020, ProPhoto) – mostly used for video/photography.

A wide‑gamut display can show:

• more saturated greens and reds
• smoother gradients in those regions
• colors that simply don't exist in sRGB

If you pick a very vivid P3 color and try to show it on an sRGB‑only screen, it must be:

• clipped – pushed to the closest sRGB color, or
• compressed – all vivid colors squeezed into a smaller range

That's why the same hex code can look:

• intense on an iPhone or high‑end monitor
• dull on an older laptop or basic external display

Traditional CSS color formats:

color: #ff0000;
color: rgb(255 0 0);
color: hsl(0deg 100% 50%);

are implicitly sRGB. They don't carry any information about Display‑P3 or other spaces.

CSS Color Level 4+ introduces the color() function and explicit spaces:

/* sRGB (equivalent to hex/rgb) */
color: color(srgb 0.9 0.1 0.2);

/* Wide-gamut P3 */
color: color(display-p3 0.9 0.1 0.2);

/* Perceptual spaces (Lab/LCH/OKLCH) */
color: lab(60% 40 20);
color: oklch(0.72 0.14 230);

Benefits:

• You can specify true P3 colors that go beyond sRGB.
• Browsers can clamp or convert when a device can't show the full gamut.
• Design tools and code can agree on the same underlying model.

Even with sRGB, designs can differ because of:

• display calibration and brightness
• ambient light (bright office vs dark room)
• OS‑level color management

With P3 in the mix, the gap grows:

• A color intended as "subtle blue" might look intense on P3 but washed‑out on sRGB.
• Photography and illustration often benefit most from P3; flat UI blocks can easily become too loud in wide gamut.

Practical guidelines:

1. Design for sRGB as a baseline

• Assume many users still see only sRGB.
• Make sure your palette works, is accessible, and looks good in sRGB first.

2. Use P3 selectively

• Great for hero images, illustrations, marketing backgrounds.
• Use more cautiously for core UI surfaces and text; extreme saturation can be tiring.

3. Avoid hard‑coding "P3 looking" colors as hex

• If you design in P3 but export as sRGB hex, check how it looks on both P3 and sRGB displays.
• Consider using color(display-p3 …) for the "rich" version plus an sRGB fallback.

4. Centralise color in tokens

• Keep a design‑token layer that knows whether a color is sRGB or P3.
• Map tokens to CSS representations (hex/rgb for sRGB, color(display-p3 …) where supported).

5. Test on multiple devices

• At least one P3‑capable device (modern phone/tablet) and one plain sRGB laptop/monitor.
• Compare especially: brand backgrounds, primary buttons, gradients, illustrations.

ColorR treats hex + RGB as sRGB representations by default, and also exposes HSL, Lab, LCH and OKLCH values — space‑aware representations where relevant.

Over time, collections on ColorR can:

• show which colors are safely in sRGB vs only fully visible in P3
• provide P3‑optimised variants of popular hues
• help teams understand how a chosen brand color behaves across sRGB and P3