It is a frustrating scenario familiar to every designer and photographer: You spend hours perfectly color-grading a photograph in Photoshop or Lightroom. The skin tones are flawless, the sky is vivid. You export the JPEG, upload it to your website, and suddenly the image looks dull, muddy, or strangely desaturated.

The Invisible Culprit: Color Names vs. Actual Colors

To understand why your colors break on the web, you must understand how computers store color. A digital image doesn't actually store "red" or "blue." It stores raw numerical values, like `RGB(255, 0, 0)`.

However, `RGB(255, 0, 0)` just means "turn the red pixel up to full power." But exactly how red is full power? The answer depends entirely on the monitor displaying it. A cheap office monitor's "maximum red" is physically much duller than the "maximum red" of a high-end OLED iPhone display.

Enter the Color Space

A Color Space (or Gamut) is essentially a map that dictates the total range of physical colors a device can reproduce.

  • sRGB (Standard RGB): Created in 1996, this is the default color space of the internet. It is relatively narrow, completely lacking the ability to display ultra-vibrant cyans, greens, and deep oranges. Practically every screen manufactured today can perfectly display the entire sRGB gamut.
  • Adobe RGB: Created in 1998, this space is much wider than sRGB, particularly in the green and blue spectrums. It is heavily used in professional print photography.
  • Display P3 (DCI-P3): This is the modern wide gamut. Created by the film industry and popularized by Apple (all modern MacBooks and iPhones use P3 displays), it contains about 25% more colors than sRGB, allowing for those eye-popping, hyper-vivid hues.

The Danger of Attached Color Profiles

When photographers export from Lightroom, they often embed an ICC Profile (like Adobe RGB or Display P3) directly into the JPEG file. This profile tells the viewing software, "Translate my raw numbers using this specific wide-gamut map."

Here is where the internet breaks it:

  1. To save bandwidth, many online image compressors, social media platforms, and CMS engines automatically strip all metadata from uploaded images to reduce file size. This includes the ICC Color Profile.
  2. Once the profile is stripped, the web browser encounters raw `RGB` numbers with no instructions on how to read them.
  3. By default, browsers assume all profile-less images are sRGB.

If your image was colored using the massive Adobe RGB space, but the browser forces it into the tiny sRGB space, the math breaks. The vivid colors "clip" and compress, resulting in the dreaded flat, muted, lifeless look that ruins your hard work.

The Golden Rule of Web Export:

Never upload images using Adobe RGB or ProPhoto RGB to the web. Always convert your images to the sRGB color space before saving. When an image is hardcoded to sRGB, it will look virtually identical on all devices, regardless of whether the metadata profile gets stripped by a compression tool.

Wide Gamut on the Web (Advanced)

What if you want to use those super vivid Display P3 colors on the web for users with high-end Apple devices?

In 2026, CSS supports the `color(display-p3 1 0 0)` syntax, and modern browsers can render Display P3 images natively. However, you must guarantee two things:

  • You must export the image with the Display P3 profile embedded.
  • You must use an intelligent compression workflow that explicitly preserves ICC Color Profiles during the minification process.

If you are unsure of your tooling, sRGB remains the universally safe standard. By managing your color spaces correctly before compression, you eliminate the guesswork and ensure your brand's visuals look exactly as intended on every screen in the world.