What Is sRGB?
sRGB is the standard colour space used for much of the web. It provides a shared reference for images, interfaces and normal desktop content.
Search
Have an existing account?
Sign In
GAMEPAD TESTER / COLOUR SCIENCE LAB
Gamut Test Online
Check your browser's colour-gamut capabilities and compare sRGB with wider Display P3 colours. Inspect gradients, colour patches, neutral greys and contrast in one advanced display-testing workspace.
Open Colour Lab ↗01 / AUTOMATIC BROWSER CHECK
Checking browser…Your Colour-Gamut Capabilities
These capabilities are checked as the page opens. No connection button or special permission is required.
REPORTED GAMUT CLASSChecking…
Reading the browser's CSS colour-gamut media queries.
sRGBP3Rec.2020
CSS sRGB gamut—
CSS P3 gamut—
CSS Rec.2020 gamut—
CSS Display P3 syntax—
2D canvas colour space—
Dynamic-range signal—
Screen size—
Pixel ratio—
What this means: A P3 or Rec.2020 media-query match is an approximate browser/output capability signal, not proof of 100% panel coverage. This page cannot measure your monitor's actual sRGB, Adobe RGB or DCI-P3 coverage percentage. For measurement, use a calibrated colorimeter.
02 / INTERACTIVE COLOUR WORKSPACE
Wide-Gamut Visual Test Studio
Compare real CSS colour-space values and inspect gradients, greys and colour patches. Choose a test below.
Compare sRGB and Display P3
Pairs use the same numeric RGB channels, but are defined in different colour spaces. P3 patches use native CSS color(display-p3 …) when supported.
STANDARD sRGBWIDE-GAMUT DISPLAY P3
If the colours look the same, the browser may be gamut mapping, your display path may be limited to sRGB, or the difference may simply be difficult to see. This comparison alone cannot identify the cause. Display P3 is not identical to cinema DCI-P3.
Gradient and Banding Lab
Compare smooth and stepped transitions. Visible banding can come from the browser pipeline, graphics settings or the panel.
sRGB interpolationStandard web colour space
Display P3 interpolationUses browser CSS P3 interpolation where supported
Neutral greyscale referenceCheck for abrupt grey bands and unwanted tints
Full-Screen Colour Patch Gallery
Choose a patch to inspect it across your display. Use arrow keys or on-screen buttons to switch patches.
Full-screen patches are visual references, not a calibration. Avoid leaving bright static colours displayed longer than needed, especially on OLED screens.
Neutrality and White-Balance Check
These sRGB greys should look neutral without a coloured cast. Room lighting and viewing angle affect appearance.
Colour casts may be caused by white balance, viewing conditions, display settings or panel characteristics; they do not directly measure gamut coverage.
03 / COLOUR-SPACE VISUALIZATION
sRGB, Display P3, Adobe RGB and Rec.2020 Diagram
Compare the standard primary chromaticities on an illustrative CIE 1931 xy diagram. These outlines are defined colour spaces, not measurements of your monitor.
The triangles use published RGB primary coordinates; the simplified plot does not depict the full spectral locus.
Choose Gamut Outlines
What does a bigger triangle mean?
The standard colour space has a wider range of reproducible chromaticities. Your display may cover only a portion of that range, and this chart does not estimate how much.
04 / EXTRA COLOUR TOOL
Text Colour Contrast Calculator
Compare two sRGB HEX colours using the WCAG contrast-ratio formula. Useful for website and interface accessibility checks.
CONTRAST RATIO—
AA normal: —AA large: —AAA normal: —
LIVE PREVIEW
Readable colour matters.
Change the foreground and background colours to see how real text could appear on a website.
This calculation is mathematical, using entered sRGB values. It does not check actual display calibration, glare or visual accessibility for every individual. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text.
05 / IMAGE GUIDE ONE
How to Test sRGB vs Display P3 on Your Monitor
Before judging wide-gamut colours, check your operating-system colour profile, display mode and browser. A creative-work monitor may offer separate sRGB and wide-gamut presets.
- Open this page in a current colour-managed browser.
- Check whether P3 is reported in the capability panel.
- Compare the sRGB/P3 pairs and full-screen patches.
- Record what you see without treating small differences as a precise coverage percentage.
Colour management and gamut mapping determine how the source colours are translated to your actual display.
IMAGE SLOT 01
sRGB vs Display P3Add your image URL in data-image-url
06 / IMAGE GUIDE TWO
How to Inspect Gradients, Colour Banding and Greys
Wide-gamut support is only one part of image quality. Smooth tonal transitions and consistent neutral greys also matter for photo editing, games and video.
- Choose the Gradient Lab and begin with smooth sRGB colours.
- Compare P3 transitions where your display path supports them.
- Use the greyscale strip and neutral patches to check banding and tint.
- Repeat at a comfortable brightness and normal viewing distance.
For trustworthy accuracy measurements, use a colorimeter and a documented calibration workflow.
IMAGE SLOT 02Gradients and Neutral GreysAdd your image URL in data-image-url
07 / PERSONAL TEST RESULTS
0 / 6 reviewedGamut Test Checklist and Report
Record your observations manually. This tool does not generate a measured gamut percentage.
Your checklist stays in this page until you close or reload it.
08 / COLOUR GAMUT EXPLAINED
Understanding Colour Gamut and Browser Colour Support
Display P3 vs DCI-P3
Display P3 uses P3 primaries with a D65 white point and an sRGB-like transfer function. Cinema DCI-P3 has different reference conventions; their names should not be treated as interchangeable.
What Is Rec.2020?
Rec.2020 defines a much wider RGB colour space for video. A browser supporting its media query does not imply that a consumer screen physically reproduces all Rec.2020 colours.
What Is Adobe RGB?
Adobe RGB (1998) is another wide-gamut space often associated with photography and print-oriented workflows. Its green primary differs from sRGB.
Coverage vs Colour Accuracy
Gamut coverage describes the extent of a colour space a display can reproduce. Accuracy describes how closely reproduced colours match their intended values. One does not guarantee the other.
What Is Gamut Mapping?
When a requested colour lies outside a display's reproducible range, the rendering pipeline maps it to a colour the display can show. Therefore two patches may look similar even when their CSS values differ.
09 / TROUBLESHOOTING
Why Does My Wide-Gamut Test Look Wrong?
P3 and sRGB look identical
Your display path may be sRGB-limited, colour-managed with gamut mapping, or differences may simply be subtle. Compare another browser, monitor setting or calibrated reference.
Colours look too saturated
Check whether your monitor uses a wide-gamut native preset for ordinary sRGB content. Consider an appropriate sRGB display mode for standard web work.
The browser reports sRGB only
Check updates, colour-profile settings, graphics drivers and your display's mode. Some browser configurations intentionally restrict wide-gamut output.
Gradient shows bands
Try another colour profile, browser and graphics setting. Banding may originate from rendering precision, display processing or the panel; no single pattern diagnoses the cause.
10 / FREQUENTLY ASKED QUESTIONS
Gamut Test FAQs
How do I test my monitor's colour gamut online?
Check the automatic browser gamut signal, compare sRGB and Display P3 colour pairs, then inspect full-screen patches and gradients. For an actual coverage percentage, a calibrated measurement device is required.
Can this test tell me my exact DCI-P3 percentage?
No. Standard browser APIs do not directly measure your screen's physical gamut coverage. Claims such as 95% DCI-P3 require suitable measurement equipment and controlled methods.
What does “Display P3 available” mean?
It means your browser reports an approximate P3-capable colour output path using a CSS media query. It is not proof of a specific monitor specification or measured accuracy.
Why do sRGB and P3 colours sometimes look the same?
The display may have limited gamut, the colour-management path may map values into a smaller range, or the visible difference may be small in your viewing conditions.
Does a bigger gamut always mean a better display?
No. Colour accuracy, uniformity, calibration, contrast, brightness, viewing angle and appropriate colour management also matter.
Can I test Adobe RGB and Rec.2020 here?
The diagram displays their standard xy primaries, and the browser panel reports an approximate Rec.2020 gamut capability signal. It does not measure Adobe RGB or Rec.2020 physical coverage.
Does this page test HDR?
It reports the CSS dynamic-range capability signal where supported, but cannot certify HDR performance, brightness, bit depth or tone mapping.
Can I use Gamut Test on iPhone, Android, or tablets?
Yes. The interface supports mobile browsers. P3 CSS rendering and full-screen availability depend on the browser, device and operating system.
What is the contrast calculator used for?
It computes the WCAG contrast ratio between two entered sRGB HEX colours and indicates common text contrast thresholds. It does not calibrate your monitor.
Does the Gamut Tester upload my display data?
This widget performs detection and calculations locally, and it does not itself upload your checklist. Normal website hosting, embedded resources or analytics outside the widget may have their own data policies.
Colour patch
1 / 12Use ← → · Esc to exit