Why the same hex color looks different on two screens

By TechCompare · Updated · How we check

A hex code gives every screen the same numbers. It doesn't guarantee the same light, so put the spectrum field on two screens and look for where they differ.

Calculator

Open the full Color Sync toolto pair with other devices.

Open one web page with a single hex color on two screens and both get identical numbers. The light that comes out can still differ, since screens differ in the range of colors they can show and in their settings. This page explains why, then uses the spectrum field to compare a whole range of hues and lightness levels at once, instead of one color patch.

Mode
Spectrum
Hue across, lightness down
Colors
Full field
No single color to set
Topic
Same color, two looks
Understanding color

How this is calculated

Join both screens to one session. Open the tool on the first screen and create a session, then enter the code on the second. Switch both to spectrum mode. Match brightness on the two screens first, turn off any automatic brightness or color changes, and give them a few minutes to settle. Keep the same distance, angle and room light for each screen. Then compare the field side by side. Look along the middle band, where the pure colors are, and at the far left and far right, which are both red. Check the top edge, which is white, and the bottom edge, which is black, for any grayish or tinted look on one side. Finally, look for any hue that appears flatter or duller on one screen.

Look for the kinds of differences you'd see in one patch, only spread across the whole range: a warmer or cooler tint, a hue that looks flatter, or a lighter or darker band in one part of the field. Those differences don't say which screen is wrong. Here's why they can happen. A hex color on a web page is an sRGB value, and CSS Color Level 4 says colors in HTML are treated as sRGB unless something else is specified. Screens don't all cover the same range of colors, though. The same spec defines an RGB color space's gamut by the chromaticities of its red, green and blue primaries and the chromaticity of its white point. MDN says the color-gamut media feature checks the range of colors a browser and its output device support. Settings like brightness, picture mode and color temperature change how the same color looks, and panel type matters for contrast and color consistency across the screen. So the same hex means the same numbers, not the same light.

The tool can't tell you why a difference exists, and it has no way to see the screens. It sends the same numbers and shows you the result, so the judgment is yours. Only a colorimeter can measure the light a screen produces, so use one if you need to know which screen matches the numbers. For a quick look, the spectrum field shows the differences across the whole range at once.

Verdict

Start with settings. Match brightness and picture mode on both screens, then compare the field again from the same seat. If the screens still disagree on the colors you care about, decide whether the gap is close enough for your work. If it isn't, measure each screen with a colorimeter and its software.

More Color Sync scenarios

Compare color on two monitors
Put the same color on two monitors side by side, then check blue, gray and white before you decide anything.
View details
Match colors across dual monitors
Start with light gray, match brightness and picture mode on both screens, then see what gap is left.
View details
Phone screen vs desktop monitor
The same orange can look different on a phone and a desktop. Compare them in one session, then decide what matters.
View details

Frequently asked questions

Why does the same hex code look different on two monitors?
Both monitors get the same numbers from the browser. What differs is how each one turns those numbers into light, which depends on its range of colors and its settings. Two monitors can match closely and still look a little different side by side.
What does a hex code actually tell a screen?
A hex code writes the red, green and blue values as six digits. On a web page those values are sRGB, and the browser passes them along. The screen decides how much light to make from them, based on its own range and settings.
Will Color Sync show my exact hex color?
Often not exactly. The tool turns a hex code into hue, saturation and lightness as whole numbers, so most hex codes come back a little different from what you typed. Every screen in a session still gets the same numbers.
Is it normal for the same hex to look different on a laptop and a monitor?
A small gap is normal. The two screens can differ in the range of colors they show and in their settings, so the same numbers can look slightly different. Decide whether the gap is acceptable for your work. A colorimeter is the only way to get measured numbers for it.