Screen Color Test — Monitor Gradient, Gamma Checker
Test color gradients for banding, check brightness uniformity, calibrate gamma, and compare colors side by side. Works on all monitors and phones.
Features
- ✓Grayscale gradient test — 256-step smooth gradient from black to white to detect color banding and quantization errors
- ✓RGB gradient test — smooth gradients for red, green, and blue channels to check individual sub-pixel performance
- ✓Custom gradient — choose any two colors to create a gradient and test specific color transitions
- ✓Brightness uniformity — solid gray fields (25%, 50%, 75%) to check if brightness is evenly distributed across the screen
- ✓Gamma calibration — adjustable gamma pattern to match your monitor's gamma response
- ✓Sharpness test — render text at different sizes to check if your monitor displays text clearly without shadows
- ✓Color comparison — display two colors side by side to test your monitor's ability to differentiate similar colors
- ✓Fullscreen mode — test in fullscreen for accurate results without browser UI interference
- ✓Works on all devices — monitors, laptops, phones, tablets with modern browsers
- ✓100% private — all testing happens locally, no data sent to server
- ✓Delta-E visual assessment — the color comparison test shows two nearly identical colors side by side to help evaluate your display's ability to reproduce fine color differences, critical for photo editing accuracy
- ✓Saturation sweep test — displays a full saturation ramp for each primary color to evaluate how well your monitor renders color intensity from desaturated pastels to fully saturated pure colors
How to Use
- 1Close other browser tabs and disable night mode / f.lux for accurate color representation
- 2Select a test from the tabs above — start with Grayscale Gradient to check for banding
- 3In fullscreen mode, look at the gradient from a distance — you should see smooth transitions without visible steps or color shifts
- 4For uniformity test, check if the gray field looks evenly lit from edge to edge — dark corners indicate backlight bleed
- 5For gamma calibration, adjust the slider until the pattern blends into the background as much as possible
- 6For sharpness test, check if text appears crisp without colored fringes or shadows around characters
- 7Use the color comparison to verify your monitor can distinguish similar colors — the more similar colors you can tell apart, the better
- 8Run the RGB gradient test individually for each color channel — a smooth red gradient without banding confirms the red sub-pixels are functioning correctly at all intensity levels
Frequently Asked Questions
What is color banding and why does it happen?
∨
Color banding appears as visible steps or stripes in what should be a smooth gradient. It happens when a display can't render enough distinct color levels. Most consumer monitors use 6-bit panels (262,144 colors) with dithering to simulate 8-bit (16.7 million colors). Under certain conditions, the dithering fails and banding becomes visible. 8-bit and 10-bit panels have significantly less banding.
What gamma value should my monitor be set to?
∨
The standard gamma for sRGB (used by Windows, web, and most content) is 2.2. Mac systems traditionally use 1.8, but modern macOS defaults to 2.2 as well. If your measured gamma differs significantly from 2.2, images may appear too bright (low gamma) or too dark (high gamma). Use the gamma test to verify your current setting.
Does browser color management affect the test results?
∨
Yes. Modern browsers apply color management which can affect gradient rendering and color accuracy. For the most accurate results, test with multiple browsers. Chrome and Edge typically have good color management support. Safari on macOS also handles color well. Firefox may render colors slightly differently due to its color management implementation.
How do I fix backlight bleed on my monitor?
∨
Backlight bleed is a physical hardware issue where light leaks from the edges of the LCD panel. It cannot be fixed through software. However, you can minimize its visibility by: reducing screen brightness, adjusting contrast settings, ensuring the monitor is on a flat surface, and checking if the monitor's bezel is applying uneven pressure. For severe cases, check your warranty — many manufacturers replace panels with excessive backlight bleed.
Is this test accurate enough for color-critical work?
∨
This test provides a good visual assessment but is not a substitute for hardware color calibration with a colorimeter (like X-Rite i1Display or Datacolor SpyderX). For professional color work (photo editing, video production, print design), use a dedicated colorimeter to create accurate ICC profiles. This browser test is useful for quick checks and consumer-level assessment.
Why does my gradient look different on my phone vs monitor?
∨
Different displays use different panel technologies (IPS, OLED, TN, VA) with varying bit depths and color processing. OLED phones typically have excellent gradient rendering due to per-pixel brightness control. LCD monitors may show more banding, especially at lower brightness levels. Also, phone screens are smaller, making banding less noticeable from normal viewing distance.
What is the difference between 6-bit, 8-bit, and 10-bit panels?
∨
Bit depth determines how many distinct colors each pixel can display. 6-bit panels display 262,144 colors and use dithering to simulate 16.7 million colors — banding is most visible on these. 8-bit panels display 16.7 million colors natively and have much smoother gradients. 10-bit panels display 1.07 billion colors with virtually no visible banding, used in professional monitors for video editing and color grading. The grayscale gradient test clearly reveals which type your monitor has.
How does monitor calibration affect color accuracy?
∨
Monitor calibration adjusts gamma, white point, brightness, contrast, and color balance to match industry standards (sRGB, DCI-P3, Adobe RGB). An uncalibrated monitor may display colors that are too warm or too cool, incorrect brightness levels, and shifted color balance. Use the gamma test to check gamma accuracy, the uniformity test to check backlight evenness, and the color comparison to check color differentiation. Professional calibration with a colorimeter creates an ICC profile that corrects all these parameters at the system level.
What is color banding and how can I reduce it?
∨
Color banding appears as visible steps in gradients when a display cannot render enough color levels. To reduce banding: 1) Increase monitor brightness — banding is more visible at low brightness. 2) Adjust contrast to 70-80%. 3) Enable 'smoothing' or 'dithering' options in your GPU driver. 4) Use a higher bit-depth connection (DisplayPort instead of HDMI if available, and ensure 8-bit or 10-bit color is selected in GPU settings). 5) For critical work, upgrade to an 8-bit or 10-bit panel.
Related Tools
Dead Pixel Test — Free Check Monitor & Screen Defects
Test monitors, laptops, phones, and tablets for dead pixels. Display full-screen solid colors to detect stuck pixels and screen defects. 100% private.
Refresh Rate Test — Free UFO Hz Check & Monitor FPS Accuracy
Check your monitor's actual refresh rate using requestAnimationFrame. Detects frame skipping with UFO motion test. Shows resolution, DPI, and HDR info.