Enter HEX or RGB colors, one per line. Examples: #ff6b6b | rgb(255, 107, 107) | #00ff88
Ready to check
Enter colors and click Check Gamut// check if your colors are within display p3 wide gamut
Test whether HEX or RGB colors fall within the Display P3 wide color gamut. Instant browser-based P3 color compatibility checker for modern screens.
Ready to check
Enter colors and click Check GamutPaste HEX codes like #ff6b6b or RGB values like rgb(255, 0, 100), one per line.
Click "Check Gamut" and the tool instantly tests each color against the Display P3 color space.
See which colors are wide-gamut P3, standard sRGB, or fall outside any supported gamut.
color(display-p3 ...) syntaxDisplay P3 is a wide color gamut used by Apple devices, modern Android phones, and high-end monitors. It covers ~26% more colors than sRGB — those vivid greens, deep reds, and electric blues you see on an iPhone. This tool tells you which of your colors take advantage of that wider gamut.
Display P3 is a color space defined by Apple based on the DCI-P3 standard used in cinema. It covers about 26% more colors than sRGB, especially in the green and red regions. It's the default color space on all modern Apple devices since 2016, plus many Android phones and monitors.
The tool converts your HEX or RGB color into linear light values, then transforms them into the Display P3 color space using the correct ICC color matrix. If all three P3 channel values fall between 0 and 1, the color is within gamut. Colors outside that range are wider than P3 and may render differently on non-P3 displays.
A color marked "sRGB only" means it's within the smaller sRGB gamut and not using any of the extra wide-gamut range that P3 offers. It will look identical on both standard and wide-gamut displays. Most web colors fall in this category.
The tool supports 3-digit HEX (#rgb), 6-digit HEX (#rrggbb), and CSS rgb(r, g, b) notation. For P3 colors specified as color(display-p3 r g b), convert the channel values to 0–255 first, as that format specifies values already in P3 space.
Use the color() function: color(display-p3 0.2 0.9 0.5). The values are 0–1 per channel. For browser support, use @supports (color: color(display-p3 1 1 1)) to progressively enhance. Safari, Chrome 111+, and Firefox 113+ all support this syntax.
Colors like pure #00ff00 (lime green) or very saturated magentas encode values that, when converted to the P3 color space, exceed the 0–1 channel range of sRGB. This means they're expressible in P3 but sit at or near the sRGB boundary — and will look more vivid on wide-gamut displays.
Display P3 is a color space that unlocks a significantly broader range of colors compared to the standard sRGB color space that has dominated the web since the 1990s. Originally developed for digital cinema by the Digital Cinema Initiatives (DCI), Apple adapted P3 for consumer screens starting with the 2015 iMac with Retina 5K display. Since then, every iPhone from the iPhone 7, every iPad Pro, every MacBook Pro, and a growing number of Android devices and PC monitors have shipped with Display P3 capable panels.
💡 Looking for premium CSS templates and UI kits? MonsterONE offers unlimited downloads of templates, UI kits, and assets — worth checking out.
The Display P3 gamut covers approximately 26% more of the CIE 1931 color space compared to sRGB. In practical terms, this means richer greens, more vibrant cyans, deeper reds, and warmer oranges that simply cannot be reproduced on an sRGB-only display. If you've ever noticed how photos look more vivid on a newer iPhone versus an older monitor, that's P3 at work.
The difference is most dramatic in the green channel. The green primary in P3 sits at a more saturated position than sRGB's green, which is why photos of grass, tropical foliage, and emerald gemstones look so much more realistic on wide-gamut devices. Similarly, reds in P3 are deeper and more saturated — think blood red, fire engine red — colors that sRGB can only approximate.
For most of the web's history, CSS colors were implicitly sRGB. When you write #ff0000, browsers render the sRGB red. But on a Display P3 capable screen, browsers can now display much richer reds using the CSS color() function:
/* sRGB red */
color: #ff0000;
/* P3 wide gamut red — more vibrant on supported displays */
color: color(display-p3 1 0.2 0.1);Starting with CSS Color Level 4, the color() function allows you to specify colors in any defined color space, including display-p3, a98-rgb, prophoto-rgb, and others. As of 2024, support is excellent: Safari has led the charge since 2016, Chrome 111+ and Firefox 113+ both support it, meaning the vast majority of users on modern browsers can take advantage of wide-gamut colors.
Here's an important nuance: almost every color you currently write in CSS using HEX or RGB notation is an sRGB color. When the browser renders #00ff00 on a Display P3 screen, it maps that to the sRGB green, which is actually within the P3 gamut — it just doesn't use P3's full potential. The display can show a more vibrant green, but sRGB CSS syntax doesn't reach it.
This P3 Wide Gamut Checker works by doing the mathematical inverse: it takes your sRGB-encoded HEX or RGB value, converts it through linear light values, applies the P3 color matrix transformation, and checks whether the resulting P3 coordinates fall within valid range (0 to 1 per channel). Colors that produce P3 values outside that range cannot be accurately represented in sRGB — they require the extended gamut that P3 provides.
There's no single right answer, but here are practical guidelines:
The standard approach is to define your sRGB color first as a fallback, then enhance for P3-capable browsers using @supports:
:root {
--accent: #00d97e; /* sRGB fallback */
}
@supports (color: color(display-p3 1 1 1)) {
:root {
--accent: color(display-p3 0 0.85 0.5); /* P3 vivid green */
}
}This pattern ensures your design looks great everywhere while taking advantage of wider gamuts where supported. The @supports block is ignored by browsers that don't understand color(display-p3 ...) syntax, so the sRGB fallback remains active for them.
Converting from an sRGB HEX value to its P3 equivalent (the same perceived color expressed in P3 coordinates) involves: decode hex to linear sRGB → apply the sRGB-to-P3 color matrix → the output is your P3 channel values. Our tool shows you this conversion for each color you test. Note that if a color is fully within sRGB, its P3 channel values will all be between 0 and 1. If any exceed 1.0 or go below 0, the color is "wider" than sRGB — it needs P3 space to be expressed accurately.
Keep in mind: any sRGB color can be represented in P3 (P3 is a superset of sRGB). But not every P3 color can be represented in sRGB. The out-of-gamut indication in this tool flags colors that, if rendered naively as sRGB, will be clamped — losing saturation and becoming duller than intended.
Wide gamut rendering is now mainstream. Every iPhone since iPhone 7 (2016), every iPad Pro since 2015, all MacBook Pros and iMacs from 2016 onwards, Samsung Galaxy S and Note flagship series, and most premium PC monitors (Dell XPS, LG UltraFine, ASUS ProArt) support Display P3 or the similar DCI-P3. CSS color(display-p3 ...) syntax is supported in Safari 10.1+, Chrome 111+, Firefox 113+, and all modern mobile browsers. As of 2024, global browser support is approximately 88%.