Color Spaces Explained:
RGB vs CMYK vs sRGB vs Adobe RGB

RGB Color Space

RGB is called an additive color model because it works by adding light together. When all three channels are set to their maximum value, the result is pure white — the combination of all visible light. When all three channels are zero, you get pure black — the complete absence of light. This is exactly the opposite of how paint or ink behaves, which is why a screen and a printed page can look so different when they show the same image.

In practice, each of the three RGB channels is stored as an 8-bit value between 0 and 255. That gives a total of 256 × 256 × 256 = approximately 16.7 million possible colors per pixel for a standard 24-bit image. Professional workflows sometimes use 16-bit-per-channel images (48-bit total) to capture smoother gradients and allow more aggressive editing without visible banding.

Every modern display — from your smartphone screen to a 4K monitor to a billboard LED panel — outputs color using the additive RGB principle. The pixels are tiny clusters of red, green, and blue sub-pixels. Your eye integrates the light from these three sub-pixels and perceives a single blended color. Because the model relies on emitted light, the same image can look more vivid and luminous on screen than it ever can on paper, which only reflects light rather than generating it.

CMYK Color Space

CMYK is a subtractive color model. Instead of generating light, ink layers on paper absorb (subtract) certain wavelengths of light and reflect the rest. Cyan ink absorbs red light and reflects green and blue. Magenta ink absorbs green light and reflects red and blue. Yellow ink absorbs blue light and reflects red and green. By layering these three inks in varying densities, a printing press can mix a wide range of colors.

In theory, mixing cyan, magenta, and yellow at full density should produce black. In practice, physical ink pigments are impure, so combining all three at maximum produces a muddy dark brown rather than a true black. This is why printers include a dedicated black ink — the "K" in CMYK stands for "Key," referring to the key plate that carries the darkest ink in traditional offset lithography. Adding black ink separately improves shadow detail, saves money on the more expensive colored inks, and ensures crisp, clean black text.

A critical fact for designers to internalize is that CMYK has a smaller color gamut than RGB. There are colors your monitor can display — particularly vivid electric blues, neon greens, and intense oranges — that simply cannot be reproduced with CMYK inks on paper. When you design a logo that looks brilliant on screen and then send it to print, some of those vibrant colors may shift noticeably toward duller, muted equivalents. Understanding this gap is the first step toward avoiding unpleasant surprises at the print shop.

sRGB vs Adobe RGB

Not all RGB color spaces are the same. Two RGB images with identical pixel values can look very different if they use different color space profiles. The profile acts as a map that tells software — and hardware — exactly which real-world colors those pixel values correspond to. The two most important RGB spaces for most working designers and photographers are sRGB and Adobe RGB.

sRGB was standardized in 1996 as a common color space for consumer electronics. The idea was to give monitors, printers, and cameras a shared baseline so images would look roughly consistent without requiring every user to understand color management. It worked remarkably well, and today every web browser renders images in sRGB by default. If you share a photo online and it has no embedded color profile, the browser simply assumes sRGB. For anything destined for the web, sRGB is the safe, correct choice.

Adobe RGB was created by Adobe in 1998 to better encompass the color gamut of CMYK printers. Its green-to-cyan region is significantly wider than sRGB — roughly 35% more of the visible spectrum overall. This extra room matters most in landscape and nature photography where grass, foliage, and sky contain highly saturated greens and teals that sRGB cannot fully represent. Shooting in Adobe RGB or processing RAW files into Adobe RGB preserves those saturated colors all the way through your editing workflow.

There is a common misconception that Adobe RGB is always "better." The truth depends on your final destination. If your image ends up on a website, the extra colors captured in Adobe RGB are wasted — browsers will either ignore the profile or apply a conversion that can make the image look slightly desaturated on uncalibrated screens. Always convert to sRGB before uploading to the web. Keep Adobe RGB only for print and archival workflows where a color-managed pipeline is in place from start to finish.

HEX, HSL, and How They Fit In

When web developers talk about color they often use HEX codes or HSL values rather than raw RGB numbers. These are not separate color spaces — they are simply different ways to write down the same sRGB values.

A HEX code such as #3B82F6 is just the three RGB channel values (R=59, G=130, B=246) written in base-16 (hexadecimal) notation. The conversion is straightforward: 3B in hex equals 59 in decimal, 82 equals 130, and F6 equals 246. HEX codes are compact and convenient for CSS, but they carry exactly the same information as an RGB triplet. Every valid HEX color still lives inside the sRGB color space.

HSL (Hue, Saturation, Lightness) is a more human-intuitive way to specify a color. Instead of mixing red, green, and blue channel intensities — which is hard to reason about — you pick a hue angle on the color wheel (0°–360°), a saturation percentage (how vivid versus gray), and a lightness percentage (how light versus dark). HSL is widely used in CSS because it makes it easy to generate harmonious color palettes: you keep the hue constant and adjust saturation or lightness to create tints and shades. Under the hood, browsers convert HSL to sRGB values before rendering.

A related model is HSB (Hue, Saturation, Brightness), also called HSV (Hue, Saturation, Value). Photoshop's color picker uses HSB. It differs from HSL mainly in how it defines maximum brightness: a fully saturated, fully bright HSB color is a pure vivid hue, whereas the equivalent in HSL has lightness at 50%. Both models map back to the same sRGB cube — they are presentation conveniences, not distinct color spaces.

Color Management

A color management system (CMS) sits between your image data and each output device. The CMS reads the embedded ICC profile to understand what colors the image describes, then consults the output device's profile to learn what that device can actually reproduce, and finally performs the translation. The most widely used CMS on desktop platforms is Little CMS (LCMS), which underpins GIMP, Inkscape, LibreOffice, and many other open-source tools. Adobe applications use their own proprietary CMS called Adobe Color Engine (ACE).

When colors in the source image fall outside the destination gamut, the CMS must decide what to do with them. This decision is called the rendering intent. The four standard intents are Perceptual (compresses the whole gamut proportionally to preserve relationships), Relative Colorimetric (clips out-of-gamut colors to the nearest reproducible value while leaving in-gamut colors unchanged), Saturation (maximizes vividness, used for business graphics), and Absolute Colorimetric (preserves the white point, useful for proofing). For photographic prints, Perceptual and Relative Colorimetric are the most commonly used, and which looks better depends on how many out-of-gamut colors your image contains.

Choosing the Right Color Space

The right color space is not an aesthetic preference — it is a technical decision that depends on your output medium. Getting it wrong early in a project can mean rework at the end, or worse, a print job that looks nothing like the design you approved on screen. The table below captures the most common scenarios designers and photographers encounter.

Color Space Conversion

Why not just start your project in CMYK if it is destined for print? This is a question many beginner designers ask, and the answer comes down to editing flexibility. RGB images have three channels that map linearly to the screen, making it easier for tools like Curves, Levels, and Hue/Saturation to operate predictably. CMYK images have four channels with complex ink-mixing interactions. Several Photoshop filters and adjustment layer types are unavailable or behave differently in CMYK mode. Starting in RGB and converting only at the very end gives you the full power of the editing toolset throughout your project.

The most troublesome colors in RGB-to-CMYK conversion are saturated blues. A typical vivid blue such as rgb(0, 0, 255) sits well outside the CMYK gamut for most paper and ink combinations. After conversion it becomes a noticeably duller blue-purple. If your brand uses a vivid blue as a primary color, you need to agree on a CMYK equivalent early and design consistently to that value, rather than discovering the mismatch on a proof.

Going the other direction — converting from CMYK back to RGB — is equally irreversible. CMYK has a smaller gamut than sRGB, so a CMYK file converted to RGB will never contain colors outside what CMYK can express. This means you cannot "recover" vibrant colors by converting back to RGB once you have committed to CMYK. Always keep your original RGB master file. The workflow should be: work in RGB, duplicate the file, convert the duplicate to CMYK, and send the duplicate to the printer.

Common Color Issues

Best Practices

Practical Advice for Designers Working Across Screen and Print

The single most important habit you can develop as a designer who works in both screen and print is to design with print constraints in mind from the beginning, rather than retrofitting a screen design for print at the end. This means choosing brand colors that have good CMYK equivalents, testing soft proofs early in the project, and communicating with your print vendor before finalizing anything.

Many brand guidelines now specify colors in multiple formats: a Pantone swatch for spot-color printing, a CMYK formula for four-color process printing, an sRGB or HEX value for digital use, and sometimes an HSL value for CSS. This multi-format specification acknowledges the reality that no single color number works perfectly in every medium. When you encounter a brand with well-documented color specifications, that documentation represents careful cross-media testing and should be followed precisely.

For designers without a formal print background, the safest approach to a first print project is to avoid highly saturated colors near the gamut boundary, use a maximum ink coverage well below 300% even if your print shop permits higher, and always request a physical proof before approving a full run. Digital proofs shown on a monitor — even a calibrated one — cannot fully substitute for a press proof on actual paper stock with the actual inks that will be used for production.

Wide-gamut displays such as those covering the P3 color space are becoming common in professional workflows. Apple's Retina displays and many high-end monitors now cover Display P3, which is significantly wider than sRGB — roughly comparable in coverage to Adobe RGB, though with slightly different primaries. If your audience increasingly uses wide-gamut displays, images tagged as sRGB will look slightly undersaturated on those screens compared to images that fully leverage the P3 space. This is driving a gradual industry shift toward P3 as the new web color space, a transition that is already underway in Apple's ecosystem.