Sampled color looks too saturated? What to check
Find out whether the color value is truly saturated or your display makes it look that way, then check profiles, browser rendering, and source pixels.
You sample a color from a website, image, or design, but the result looks much brighter or more vivid than expected. The cause might be the color value itself, a screen setting, or the way the app displays it.
Use the Color Picker to inspect the visible color and its HEX, RGB, and HSL values. Then compare the value with the original source and check whether your display is exaggerating the color.
Check the sampled color
- Open the Color Picker in Chrome or Edge on a computer. The tool can pick colors from anywhere on the screen. Other browsers may offer reduced support or none.
- Move the picker over a flat, solid area of the color. Avoid text edges, shadows, gradients, and tiny details, where neighboring pixels may have different values.
- Note the HEX, RGB, and HSL values shown for the sample. If you know the intended HEX value from a design file or style guide, compare the values directly.
- Sample a second point in the same flat area. If the values differ, check whether the color has a gradient, transparency, texture, or an edge blended with the background.
The Color Picker samples what is visible on your screen. It does not tell you which color value was originally stored in a web page or image file. A screenshot can also differ from its source, as explained in why a HEX value can change after a screenshot.
What the result means
The sampled value matches the intended color
If the HEX value matches your reference but the color still looks too vivid, the color value may be fine. Look at display settings, the monitor's color profile, and whether the same color looks different in another browser or app.
The HSL saturation value is high
HSL reports saturation as a percentage. A value near 100% means the color is near the most saturated option for that hue and lightness in the HSL model. It is not a universal measure of how vivid a color looks to people. Two hues with the same HSL saturation can appear very different.
The sample changes across a single area
You may be sampling an edge, a shadow, a partly transparent layer, or a compressed image. Choose a larger, uniform area if possible. If the image is small or heavily compressed, its pixels may not match the color that was used to create it.
The same color looks different in another app
The apps may handle color profiles differently, or one may display a different version of the image. Compare the same page or image in both apps, at the same zoom level, and sample the same flat area. If the values match but the appearance changes, focus on color management and display settings rather than changing the HEX value.
How to fix it
- Check the source value. Compare the sample with the specified color in the design file, CSS, or brand guide. For an image, use the original rather than a screenshot or a copy saved through a messaging app.
- Turn off vivid display modes temporarily. Monitor settings with names such as Vivid, Dynamic, or Game can boost color. Switch to Standard or sRGB mode, if available, and sample the same area again.
- Check HDR and color filters. On Windows 11, open Settings › System › Display › HDR and temporarily turn off Use HDR if it is enabled. Also check Settings › Accessibility › Color filters. On a Mac, open System Settings › Displays and check whether Night Shift or True Tone is changing the screen appearance.
- Check the display's color profile. On Windows 11, open Settings › System › Display › Color profile and check that the intended profile is selected for the monitor. On a Mac, open System Settings › Displays and review the Color profile setting. Use the monitor's recommended profile if you are unsure, rather than choosing a random profile.
- Compare another browser or app. Open the same page in Chrome and Edge, or compare the same image in the original app and a browser. If the result differs only in one place, check that app's color settings and extensions. For browser-specific differences, see how to compare web design colors in Chrome and Edge.
- Reset display adjustments one at a time. If you recently changed a monitor preset, calibration, HDR option, or graphics setting, restore the previous value and check again. Changing several settings together makes it harder to find which one affected the color.
Why equal saturation values can look different
HSL is a convenient way to describe hue, saturation, and lightness, but its saturation percentage is not a direct reading of perceived vividness. Human vision responds differently to different hues, and a color's appearance also depends on its brightness and the colors around it.
Displays can also support different color ranges. A wide-gamut screen can show some colors more vividly than a standard sRGB display, while apps may interpret color information differently. That means a color can have the same numeric value yet look different on two screens. For a specific design task, trust the intended color value and a correctly set display profile before adjusting the color by eye.
