Same HEX Code, Different Color on Every Screen — Here's Why
If you've ever typed the same HEX code — say, #ec4899 — into CSS or a design tool and noticed it looked more saturated on an iPhone or Mac than on a regular monitor, you weren't imagining it. The cause isn't the HEX notation itself, but which color space the browser interprets those numbers against before drawing them on screen. This guide breaks down the difference between two color spaces, sRGB and Display P3, and how an actual color conversion tool handles that difference in its code.
1. sRGB: the default assumption behind web color
Developed jointly by HP and Microsoft in 1996, sRGB went on to become the default color space of the web standard. Unless stated otherwise, every HEX, rgb(), and hsl() value in CSS is defined against the sRGB color space. In other words, #ff0000 doesn't mean "the reddest possible red" — it means "the color you get when the R channel hits its maximum value within the sRGB color space." sRGB's gamut — the range of colors it can represent — covers only about 35% of all colors the human eye can perceive; a good portion of highly saturated greens and oranges fall outside the sRGB triangle entirely and simply can't be represented in it.
2. Display P3: why screens started getting a wider gamut
Adopted by Apple starting with the 2015 iMac, Display P3 is a variant of the digital cinema standard DCI-P3 with its white point adjusted to match the web standard, D65. It covers roughly 25% more color area than sRGB, with the difference most noticeable in reds and greens. Since then, the latest iPhones, Macs, some flagship Android devices, and premium monitors have progressively adopted P3 panels, to the point that a "P3 display" is no longer an exception — it's a common spec.
3. What's really behind "same HEX, different look"
HEX and RGB numbers are always defined against sRGB, and in a color-managed environment like a modern browser, those numbers get automatically converted to match the display's actual gamut, whether that's sRGB or P3. On a properly functioning web browser, #ec4899 is corrected by the system to look like "the same color" whether you're viewing it on an sRGB monitor or a P3 one. The problem arises in pathways that skip this color management step entirely — image files missing color space tags, some game engines or older graphics software, or a design tool that exports a color it internally tagged as P3 as a plain sRGB HEX value instead. In those cases, the same numbers get misinterpreted against the wrong color space, and the saturation or hue ends up looking off.
4. A concrete example: sRGB red and its P3 coordinates
| Notation | Value | Meaning |
|---|---|---|
| CSS sRGB notation | #ff0000 / rgb(255,0,0) | Standard red as defined in the sRGB color space |
| Same color reproduced in P3 coordinates | color(display-p3 0.9175 0.2003 0.1386) | The visually identical color, converted to Display P3 coordinates |
| P3-exclusive color (unrepresentable in sRGB) | color(display-p3 1 0 0) | A color outside the sRGB triangle — more saturated than standard red |
5. How does this site's color converter actually work?
Checking the actual code behind modoohub.com's Color Converter shows that conversions between HEX, RGB, HSL, and RGBA run through the functions hexToRgb, rgbToHex, and rgbToHsl, which handle pure numeric arithmetic only. There's no logic for the color() function or display-p3 coordinates — every input and output value is always treated within the sRGB 0-255 integer range. In other words, whatever this tool computes is always an "sRGB-based conversion value," and whether that value visually renders as the same color on a P3 display is entirely up to the browser and OS's color management. If you need to work directly with wide-gamut colors, you'll need to write the color(display-p3 ...) syntax into your CSS by hand separately.
6. If you actually want to work with wide gamut on the web
The CSS Color 4 spec supports the color(display-p3 r g b) function and the @media (color-gamut: p3) media query. The typical pattern is to use the latter to detect whether a screen supports P3, apply a more saturated color conditionally when it does, and leave a plain sRGB fallback in place for screens that don't. That said, sRGB HEX alone is enough for most practical work — P3 is worth the extra attention only for jobs where accurate color reproduction genuinely matters, like print materials or brand colors. To also check visibility of your background and accent colors, it's worth pairing this with the Color Contrast Checker or the Accessibility Color Checker. For palette design, see also the CSS Gradient Generator and the Tailwind Color Generator.
Frequently Asked Questions
Q. Do all browsers support color management?
Modern Chrome, Safari, and Firefox all support color management, but colors can still look off in exceptional cases — for instance, when OS settings or the content itself is missing a color space tag.
Q. Why does a screenshot look like a different color when I send it to another device?
If an image captured in P3 is opened in a viewer that doesn't do color management (or vice versa), its pixel values get reinterpreted against the wrong color space, which can shift the saturation.
Q. Can this site's color converter give me P3 coordinates?
No. It currently only supports sRGB-based HEX/RGB/HSL/RGBA conversion. If you need P3 values, you'll have to write the CSS color() function yourself.
Q. When is it fine to only worry about sRGB?
sRGB is plenty for the vast majority of web and app UI and text content. You only need to think about P3 on top of that for work where color reproduction accuracy matters, like photo editing or printed brand materials.