No Login Data Private Local Save

HDR Color Preview - Online See Wide Gamut Colors

24
0
0
0
Checking display...
Within sRGB Gamut
Display P3 Wide Gamut
Actual P3 rendering — wider color gamut
sRGB (Clipped) Standard Gamut
sRGB approximation — may be clipped
1.000
0.250
0.000
CSS P3 Color
color(display-p3 1.000 0.250 0.000)
sRGB Approximation
rgb(255, 64, 0)
HEX (sRGB approx)
#FF4000
🎨 Wide Gamut Presets (click to load)
Frequently Asked Questions
What is HDR / Wide Color Gamut (WCG)?
HDR (High Dynamic Range) and WCG (Wide Color Gamut) refer to displays and content that can reproduce a broader and more vibrant range of colors than traditional sRGB. While sRGB covers about 35% of the visible color spectrum, Display P3 covers roughly 50%, and Rec. 2020 covers over 75%. This means more saturated reds, deeper greens, and vibrant cyans that simply cannot be shown on standard sRGB monitors.
What's the difference between Display P3 and sRGB?
Display P3 is a color space developed by Apple, based on DCI-P3 cinema standards. It has a gamut approximately 25% larger than sRGB, especially in the red-orange and green-cyan regions. Colors that look vibrant on a MacBook Pro or iPhone (which use P3) may appear duller or clipped when viewed on a standard sRGB monitor. The P3 color space allows for much richer, more lifelike colors.
Which devices support wide gamut colors?
Many modern devices support wide gamut: Apple MacBook Pro (2016+), iMac 5K, iPhone X and newer, iPad Pro, Samsung Galaxy flagships, Google Pixel (recent models), and many 4K HDR TVs. On desktop, you also need a browser that supports CSS color(display-p3 ...) — Chrome, Safari, Edge, and Firefox all support this now.
How do I use wide gamut colors in CSS?
Use the color() function: color(display-p3 r g b) where r, g, b are values from 0 to 1. For example: background: color(display-p3 1 0.25 0); produces a vivid orange-red beyond sRGB. Always provide an sRGB fallback: background: rgb(255,64,0); background: color(display-p3 1 0.25 0);. Browsers that don't understand P3 will use the sRGB fallback.
What is gamut clipping?
Gamut clipping occurs when a color from a wider color space (like P3) is forced into a smaller color space (like sRGB). Colors outside the target gamut get "clipped" to the nearest representable color, often resulting in loss of saturation and detail. Our tool shows both the original P3 color and its sRGB clipped version side by side so you can see the difference.
How can I tell if my monitor supports Display P3?
This tool automatically detects your display's capabilities using the (color-gamut: p3) media query. Look at the badge at the top — if it says "P3 Supported", your display can show wide gamut colors. You can also visually compare the two preview panels: if they look identical for vibrant presets, your display may be limited to sRGB. On a P3-capable screen, the left panel will appear noticeably more vivid for out-of-gamut colors.
What about HDR brightness levels?
This tool focuses on wide color gamut (chromaticity). HDR also encompasses higher peak brightness (luminance), which requires different CSS features like dynamic-range-limit or HDR image formats (AVIF, JPEG XL). True HDR brightness on the web is still evolving. Wide gamut colors (chroma) are well-supported today via color(display-p3 ...).
Are there other wide color spaces besides Display P3?
Yes! Rec. 2020 is even wider than P3 (used for 4K/8K HDR TV standards), and Adobe RGB is popular in photography. CSS also supports color(rec2020 ...) in some browsers. However, Display P3 is the most practical wide gamut space for web design today because it's natively supported by Apple devices and most modern browsers, making it the sweet spot between compatibility and color richness.
🔧 Related Tools