Gamut & Out-of-Gamut Handling (Deep Dive)

By Pritesh Yadav 10 min read

You pick a gorgeous electric-blue logo on your screen. It glows. You order 500 business cards. They arrive looking like a tired, dusty navy. Nobody made a mistake at the print shop — the color you chose was simply impossible to print. This section explains why that happens, what the industry does about it, and how a print platform like Print-Flow-360 can warn a customer before they hit "Order" instead of after.

5.1 What is a gamut?

Gamut
The complete range of colors that a particular device or color space can capture, display, or reproduce. Think of it as a "menu" of colors — anything not on the menu can't be served.
Color space
A defined system for describing colors with numbers (for example, RGB or CMYK). Each color space has its own gamut.
Device-independent reference space
A neutral "map of all colors a human can see," used so we can compare different devices fairly. The two common ones are CIE 1931 xy (the famous horseshoe-shaped diagram) and CIELAB / CIE L*a*b* (a 3D space).

A gamut is best pictured as a 3D solid sitting inside that reference space. The outer horseshoe boundary represents every color the human eye can perceive. Every real device — your phone, your monitor, a printing press — can only reach part of that horseshoe. Its gamut is a smaller blob inside.

Analogy — The human-visible horseshoe is the whole box of 120 crayons. Your monitor got a 64-crayon box. The printing press got a 40-crayon box — and a few of its crayons aren't even in the monitor's 64. A color is "out of gamut" simply when the crayon you want isn't in the box you're using right now.

Key idea — "Out of gamut" (OOG) is never absolute. A color is out of gamut for a specific target — this monitor, or this printer + this paper + this ink. Always ask "out of gamut for what?"

5.2 Why CMYK can't print everything your screen shows

This comes down to physics — two completely different ways of making color.

RGB (additive color)
Used by screens. You start with a black screen and add red, green, and blue light. All three at full = white. Color comes from emitted light, so it can be intensely bright and saturated.
CMYK (subtractive color)
Used by printing. You start with white paper and lay down Cyan, Magenta, Yellow, and blacK ink. Ink absorbs (subtracts) some wavelengths and reflects the rest. More ink = darker. Color comes from reflected light.

Because ink can only absorb light and never emit it, two hard limits apply: the brightest a printed color can ever be is limited by the paper's whiteness, and the most saturated it can be is limited by the pigment. Glowing neon greens, vivid cyans, electric blues, hot oranges, and saturated purples are exactly the colors pigments struggle with. So the CMYK solid is a smaller blob that mostly nests inside RGB.

   Human-visible (CIE horseshoe)
   ________________________________
  /                                \
 |   RGB monitor gamut             |
 |   .........................     |
 |   :   CMYK print gamut    :     |
 |   :   (smaller, inside)   :     |
 |   :......................:      |
 |        ^ a tiny sliver of CMYK  |
 |          pokes OUT of sRGB      |
  \________________________________/
Common mistake — Believing "CMYK is always smaller than RGB everywhere." Mostly true, but not strictly. Offset CMYK profiles like FOGRA39 or GRACoL/G7 are smaller than Adobe RGB overall, yet slightly exceed plain sRGB in a few spots (very saturated cyans and yellow-oranges). A handful of printable colors actually live outside sRGB.

Some rough, illustrative figures: people often cite RGB as ~16 million addressable shades versus CMYK reproducing maybe ~16,000 — treat those as ballpark, not gospel. On wider RGB spaces: Adobe RGB covers about 86.2% of Pointer's gamut (the range of real-world surface colors) and was deliberately designed to include more cyan-green for cleaner CMYK conversion; ProPhoto RGB reaches ~90% of real-world colors; sRGB is similar to Adobe RGB in overall coverage but weaker in the cyan-green region.

5.3 What happens to an out-of-gamut color? Clipping vs. compression

When a color can't be printed, software must decide where to put it instead. That decision is controlled by the rendering intent.

Rendering intent
The rule for mapping out-of-gamut colors into the destination gamut. The ICC standard defines four: Perceptual, Relative Colorimetric, Absolute Colorimetric, and Saturation.

They fall into two big strategies:

StrategyIntentsHow it worksRisk / best for
Clipping Relative & Absolute Colorimetric In-gamut colors stay exact; only OOG colors get snapped to the nearest printable boundary color. Many different OOG colors can collapse onto the same edge color → lost detail (posterization, blocked saturated areas, hue shifts). Best when few colors are OOG (logos, brand colors you want kept exact).
Compression Perceptual Squeezes the entire source gamut to fit the destination, preserving the relationships between colors. Even in-gamut colors lose a little saturation, but gradients stay smooth and nothing snaps abruptly. Best for photos with many OOG colors.

The fourth intent, Saturation, maximizes vividness over accuracy — good for charts and business graphics, bad for photos.

Analogy — Clipping is shoving everyone who's too tall against the back wall of a photo — they all line up at the same spot and you lose who was taller. Compression is asking the whole crowd to take one small step back so everyone still fits in frame and you can still tell them apart.

Black Point Compensation (BPC)
An option that maps the source's darkest black to the destination's darkest black so shadows don't get crushed or muddy. Keep it ON for most work.
Common mistakes — (1) Using Absolute when you wanted Relative — Absolute even simulates the source paper white (it's for proofing one printer on another), giving an odd tint. (2) Forgetting BPC and getting blocked, muddy shadows. Sensible default for most graphics: Relative Colorimetric + BPC on.
Key idea — Conversion by clipping is irreversible. Once two distinct colors are snapped to the same boundary color, the difference is gone forever. Never treat RGB→CMYK as something you can undo.

5.4 Seeing the problem early: soft proof & gamut warning

Soft proof
An on-screen simulation of how the print will actually look, viewed through a specific printer + paper ICC profile, before any ink is used. In Photoshop: View > Proof Setup > Custom, then toggle Proof Colors with Ctrl/Cmd+Y.
Gamut warning
An overlay (Photoshop: Shift+Ctrl/Cmd+Y) that paints a flat gray mask over the exact pixels that fall outside the destination gamut and will be remapped significantly.
ICC profile
A standardized file describing a specific device's gamut, so color can be translated accurately between devices.

The difference matters: Soft Proof shows you the simulated final look (more useful for judging the real outcome), while Gamut Warning just flags which pixels are risky. The Color Picker also shows a small triangle "gamut alarm" with a swatch of the nearest in-gamut substitute you can click to accept.

Common mistakes — Soft-proofing on an uncalibrated monitor or with the wrong/generic profile — garbage in, garbage out. And panicking at every gamut warning: a flagged color that still looks fine in the soft proof needs no edit. A warning means "inspect," not "broken."

5.5 Handling it gracefully: suggesting the nearest printable color

The kind move is to warn early, non-blockingly, and offer the closest color that will print. "Closest" is measured with a perceptual distance called Delta E (ΔE).

Delta E (ΔE)
A number for how different two colors look to the human eye. Smaller = closer. A just-noticeable difference (JND) is roughly ΔE 1–2; most tools treat ΔE < 2 as "close enough to be indistinguishable."

The ΔE formulas, oldest to best: CIE76 (plain Euclidean distance in Lab — crude), CIE94, CIEDE2000 (the industry standard, perceptually tuned), ΔEOK (Euclidean in Oklab), and ΔEITP (for HDR).

The modern web approach — the CSS Color Module 4 default, used by libraries like colorjs.io — is smart: instead of naively clipping channels, it works in OkLCh (a perceptual hue/chroma/lightness space). It holds the hue and lightness fixed and does a binary search reducing chroma (saturation) until the color fits, comparing each guess to a channel-clipped version with ΔEOK and stopping when ΔE < 2. (If lightness ≤ 0 → black; ≥ 1 → white.) Chroma-reduction keeps the color recognizably "the same hue, just calmer," which beats naive clipping for most hues; yellows are a known weak spot.

5.6 Bringing it to Print-Flow-360

Here's the honest state of the stack: PF360 has no documented RGB→CMYK conversion and no preflight step. The Fabric.js design studio (in designer/) lets customers pick any RGB/hex color, the storefront brand-color theming is RGB, and the Node PDF service (pdf-service, port 4000, using sharp for images and PDFKit for PDFs) outputs RGB PDFs. So a neon hex chosen in the studio sails straight through to a PDF with no warning — the customer discovers the dull result only on the doorstep. That's a textbook silent-lie bug: the screen promised something the print can't keep.

Worked example — a graceful PF360 gamut warning.
  1. Customer picks #00FF88 (electric mint) for a flyer headline in the Fabric.js studio.
  2. On color-pick, check it against a target print profile (a FOGRA-like CMYK gamut for the product's print process). ΔE to its nearest printable color is large → it's OOG.
  3. Show an inline, non-blocking message in plain language: "This bright color may print noticeably duller than it looks on screen." (Per PF360 UX rules: reserve the layout space so nothing jumps, never a raw error, never block.)
  4. Render a live swatch of the nearest printable color (computed via CIEDE2000 or the OkLCh chroma-reduction method, stopping at ΔE < 2) with a one-click "Use printable color" button.
  5. Suggest, never substitute. If the customer keeps their color, honor it. Silently swapping it would be its own silent-lie bug.
  6. If no color is out of gamut, behavior is byte-for-byte unchanged — no warning, no surprises.
Pro tip — The gamut check, the ΔE math, and a true RGB→CMYK transform all belong on the Node PDF service, not bolted into the browser studio. It's the heavy-file, server-side layer that already owns rendering — the natural home for a future preflight step that flags OOG colors, low-res images, and missing bleed, strengthening the platform's weak order-to-production spine.
Key takeaways —
  • Gamut = the colors a device can reproduce; OOG is always relative to a specific target (printer + paper + ink), never absolute.
  • CMYK (subtractive ink) is mostly smaller than RGB (additive light) because pigment can't emit — neons, bright greens/blues/oranges are the usual casualties — though a few CMYK cyans/yellow-oranges poke outside sRGB.
  • Clipping (Relative/Absolute Colorimetric) keeps in-gamut colors exact but snaps OOG colors to the edge, losing detail; compression (Perceptual) squeezes everything to keep relationships smooth — best for photo-heavy art. Conversion is irreversible.
  • Default to Relative Colorimetric + Black Point Compensation on for most graphics; Perceptual for photos with lots of OOG color.
  • Soft proof simulates the real printed look; gamut warning just flags risky pixels. Both need a calibrated monitor and the correct profile, or they lie.
  • Suggest the nearest printable color by minimizing ΔE (CIEDE2000, or OkLCh chroma-reduction stopping at ΔE < 2 — one JND).
  • PF360 today has no RGB→CMYK conversion or preflight. The right fix: a friendly, non-blocking gamut warning in the studio plus a real CMYK/preflight step in the Node PDF service — warn and suggest, never silently substitute or block.

Continue reading