Why Digital Colours Shift: Waves, Gamuts & DAM Mechanics

From electromagnetic radiation to digital rendering - how computers turn invisible light spectrums into visual brand experiences.

If you have been around the Digital Asset Management sphere for any length of time, you quickly learn that assets are not simply passive data – they are living objects that are manipulated, transmitted, and displayed on hundreds of thousands of screens while some can be printed to paper, fabric or plastic. Here are three fundamental reasons why understanding how color mechanics work is critical to ensure your greens stay green and your whites white:

🛡️

Protect Brand Visuals

It prevents the high-profile degradation of your assets, having knowledge of color space conversion ensures consistency of your essential brand assets on every possible channel and device and ensures your own shade of yellow remains constant across your brand.

⚙️

Optimize DAM Pipelines

In a system which uses automated transcoding engines they need to depend on explicit rules. This is where Proper ICC profile management comes in and prevents outputting compromised web thumbnails and previews.

🌉

Bridge Creative & Engineering

While Designers operate in broad gamuts, the developers usually build for the web spaces. Being Digital Asset Managers, we find ourselves between the two parties and require a seamless transfer of studio masters into different formats that pleases everyone in the organization.

Below, we will take a look at each of the core mechanics begind colour as we discuss the following topics:
RGBCMYKColour GamutClippingICC Profiles
🇬🇧 A Quick Note on Spelling

Please note that this article is written in British English. As a Brit, I shall be spelling "colour" with its rightful, glorious 'u'. You can argue until the cows come home - or until the tea goes cold and what-not, but the extra letter stays! Yes, I know it's spelt "color" in things like CSS and probably every programming language ever, but please let me have this one alright? Also, did you know the letter 'U' is the least used vowel, so lets give it it's time in the sun for once...

Here is a mind-bending truth to kick things off:

Colour doesn't actually exist in the physical universe.

Out in the wild, there is no such thing as "red," "navy blue," or "neon pink." There is only the electromagnetic spectrum - a continuous ocean of energy waves traveling through space. The exact same spectrum that carries Wi-Fi signals, radio broadcasts, X-rays, and microwaves also carries visible light. The only difference is wavelength.

Gamma Rays X-Rays VISIBLE LIGHT 380nm – 750nm Infrared Radio Waves

When an object looks "red" to you, it's simply absorbing all other wavelengths and bouncing a specific slice of energy (~700 nanometers) back into your eyes. Your brain's visual cortex intercepts these electromagnetic waves and paints the subjective sensation of "colour" in your mind. colour is an optical hallucination manufactured by your brain to help you make sense of physics.

And that brings us to the digital dilemma:

If colour is just a physical wave that our brains interpret, how on earth do digital devices, web browsers, and file formats agree on how to display it?

Have you ever spent hours tweaking an image until the colours looked absolute magic on your screen, only to send it to a colleague - or upload it to a website - and realize it now looks flat, dull, or strangely orange?

It’s one of the most maddening mysteries of the digital world. But your computer isn't broken, and your eyes aren't playing tricks on you. You’ve just stumbled into the invisible highway system of digital colour: colour spaces, gamuts, and ICC profiles.

Here is how it all works under the hood.

RGB vs. CMYK: Light vs. Ink

Before we talk about colour spaces, we have to look at how devices build colour in the first place. There are two primary recipes:

  • RGB (Red, Green, Blue): This is how screens work. Your monitor, phone, and TV are dark glass panels that project light at you. Mix full Red, Green, and Blue light together, and you get pure white light. This is called additive colour.
  • CMYK (Cyan, Magenta, Yellow, Key/Black): This is how physical printing works. Paper doesn't project light; it reflects it. Tying inks together absorbs light. The more ink you layer, the darker it gets until you reach black. This is called substantive or subtractive colour.

Because light and ink behave by entirely different physical laws, digital assets live in constant translation between screen light and printed ink.

Gamuts: The Colour Crayon Box

Imagine buying a pack of crayons.

  • A basic pack gives you 8 colours.
  • A standard back-to-school box gives you 24 colours.
  • The mega-pack with the built-in sharpener gives you 120 colours.

In digital media, that crayon box is called a gamut. A gamut is simply the total range of colours a specific device (or file format) is capable of creating.

sRGB (Standard Box - 24) Display P3 (Modern Phone) Adobe RGB (Studio Crayons - 120)

Not all digital displays hold the same size crayon box:

  • sRGB: The universal standard. Created in 1996 by HP and Microsoft, sRGB is the default language of the web. It’s a smaller crayon box, but virtually every monitor, phone, and web browser on Earth speaks it reliably.
  • Display P3: The modern mobile standard. Popularized by Apple, P3 offers about 25% wider gamut than sRGB - meaning deeper reds, vibrant greens, and richer tropical ocean blues. If it was a pack of crayons - this is the larger pack of crayons
  • Adobe RGB: The photographer’s playground. Designed to capture a huge range of vibrant greens and cyans that high-end printing presses can reproduce, far beyond what sRGB can represent.If it was a pack of crayons - this is the largest pack of crayons

Understanding the CIE 1931 xy Diagram

You have probably seen this diagram that is used to show color spaces. Think of the CIE 1931 xy diagram as a master map of human vision. The outer curved shape (often called the "horseshoe" or "tongue") represents every single colour a normal human eye can see.

Because screens and printers cannot reproduce every natural colour, they only cover a smaller section inside this map. The larger a gamut's shape on the diagram, the more vibrant and varied the colours it can display.


How Common Colour Spaces Compare:

sRGB (Standard Web) The baseline for the internet. It uses the smallest footprint on the diagram, meaning it is safe and compatible with almost all displays, but it misses out on deep, vivid greens and cyans.
Display P3 (Modern Screens) Built for modern devices like iPhones, MacBooks, and newer TVs. It stretches further toward vibrant greens and warmer tones than sRGB, delivering noticeably richer visuals.
Adobe RGB (Photography & Studio) Created for high-end photography and print prep. Its boundary stretches far into saturated greens and blues to match what professional photo printers can produce.
CMYK (Physical Print Ink) Because physical ink on paper absorbs light rather than emitting it like a glowing screen, CMYK has a smaller, slightly shifted shape. It excels at deep cyans and rich dark tones, but it cannot reproduce bright neon colors. This also shows the colour offset print designs can have over screen ones and why your specific shade is so different on paper.
x y 0.0 0.2 0.3 0.4 0.5 0.6 0.8 Adobe RGB Display P3 sRGB CMYK (Print) COLORSPACE GAMUTS sRGB (Standard Web) Display P3 (Modern Screen) Adobe RGB (Photography) CMYK (Offset Press) CIE 1931 Chromaticity Human Visual Spectrum vs. Digital Gamuts

Out-of-Gamut & Clipping: The "Fitting a Square Peg" Problem

What happens when you shoot a photo in a wide colour space like Adobe RGB (the 120-crayon box) and upload it to a web page locked to sRGB (the 24-crayon box)?

The browser hits a wall called gamut clipping.

If your image contains an ultra-vivid neon green that exists in Adobe RGB but simply does not exist in the sRGB colour alphabet, the browser has to make a compromise. It chops off the extreme shade and forces it into the nearest available sRGB colour.

Instead of a smooth gradient of bright, vibrant neon hues, your image suddenly clips - flattening subtle highlights into dull, muddy patches.

Interactive Gamut & Clipping Simulator
Select colours to see how browsers compression-clip wide gamuts.
Wide-Gamut Presets
Destination Gamut
Custom RGB Sliders
R 0
G 255
B 180
Raw Master
Uncompressed
CLIPPED
Screen Rendition
Target: sRGB
IN GAMUT - Perfect Match
Adjust controls to see colour space translation in real time.

ICC Profiles: The Passport for Your File

If colour spaces are different languages, how do digital asset management (DAM) systems, web browsers, and design programs keep track of them?

They use an ICC Profile (International Color Consortium).

An ICC profile is a tiny snippet of metadata tucked directly inside your image file’s digital header. Think of it as a passport:

"Hello! I am a JPEG. My numbers say I have a Red value of 240, but please translate that using the Display P3 dictionary so I look punchy, not dull!"

When you upload an asset to a DAM system, the automated engine reads this passport immediately. If it needs to generate a quick web thumbnail, it automatically transcodes the asset - translating those wide-gamut colours into sRGB so every user on any screen sees the exact same colour fidelity.

Quick Reference: Colour Space Matrix

Target / Channel Recommended Space Formats DAM Guidance
Web & E-Commerce sRGB WEBP JPG Standard baseline for all browsers to prevent dull shifts.
Mobile & Apple UI Display P3 PNG HEIC Rich, vibrant colour support for modern OLED screens.
Commercial Print Adobe RGB TIFF PSD Preserves rich cyans/greens for CMYK press translation.
DAM Archival Master Adobe / ProPhoto RAW DNG Store highest dynamic range; transcode down upon export.

The Takeaway for Digital Creators

Digital colour isn't an absolute truth; it's a constant translation. By doing some simple tasks at ingestion and making people who upload aware of expected standards such as tagging your files with clear ICC profiles and converting wide-gamut graphics to sRGB before publishing to the web, you ensure your visual brand looks exactly as crisp, vivid, and intentional as you designed it.


If possible, I recommend that you store Master Assets in Wide-Gamut RGB, this could be as simple as retaining the camera or creation masters in high bit-depth (16-bit) Adobe RGB or Display P3 as a non-destructive form of preservation. Preservation of the maximum captured gamut right from the start ensures future pipeline compatibility without destructive clipping.


Also, ensure you include Explicit ICC Profiles on the files during Ingestion, make sure you not allow ingestion on any “untagged” image files into the DAM system (or if you have too, ensure they are tagged as such, so you can build safeguards later). Automated ingestion processes can be used to validate this and by including an explicit ICC profile in the file header this prevents misinterpretation by the media processing engine in your DAM.


I would recommend as well that you leverage automation - Do not store any duplicates of static renditions (for example, sRGB based web thumbnails); You should be able to store single source masters and use the image processing features within the DAM to do the conversion to sRGB or targeted CMYK profiles and store those against the originals.


And finally, If your DAM vendor allows it consider using Lossless Storage Tiering for Masters and Proxies - Use hot-fast storage tiers (SSD/S3 Standard) for WebP/AVIF web proxies and archival of uncompressed high-gamut masters (TIFF/RAW/16-bit PNG) into cold storage tiers (Glacier/Archive).