The Designer Approved the Red. The Printer Matched the File. The Color Was Still Wrong. Here Is Why.
Maggie had been staring at the same red on her computer screen for three days. Her brand's primary color. She had matched it to a Pantone swatch in the initial branding session, confirmed it with the designer, and approved the final logo. The red was right.
The printer called three weeks later. The finished brochures were a noticeably different shade: orangier, less saturated, closer to brick than blood. Maggie had approved the file, the designer had delivered the correct file, and the color was still wrong. Neither the monitor nor the designer had made a mistake. The color space had.
This scenario repeats in design agencies, print shops, and marketing departments every day. The file is technically correct. The color code is accurate. And the output does not match what was approved. Understanding why requires a short history of how color representation in computing developed, and why the different systems designers use today do not fully agree with each other.
How Computer Color Spaces Developed
The problem of representing color digitally has roots in the television industry. The NTSC color model, developed in the 1950s for American broadcast television by the National Television System Committee, defined color as combinations of luminance and chrominance signals. When computers began using color displays in the late 1970s and 1980s, they adopted various schemes depending on the hardware: early IBM CGA cards in 1981 could display 16 colors from a fixed palette, while Commodore's Amiga, released in 1985, could display 4,096 colors from a palette of over 16 million.
The sRGB standard, which became the basis for HEX color codes and most web color work, was defined jointly by Hewlett-Packard and Microsoft in 1996 and later standardized as IEC 61966-2-1. The "s" stands for "standard," and the intent was to establish a common color space that would produce consistent results across consumer monitors, printers, and the web. The standard defines a specific gamut, or range of colors, based on the characteristics of consumer CRT monitors at the time.
The World Wide Web Consortium adopted sRGB as the default color space for CSS with CSS Color Level 3. HEX codes, RGB values, and HSL values in CSS all operate within the sRGB gamut unless the CSS Color Level 4 color() function with an explicit color space is used, a capability that major browsers added in 2023.
The Problem with Color Representations
HEX color codes are six-character strings like #D32F2F that represent colors as combinations of red, green, and blue channel values in the sRGB color space. Each pair of hexadecimal digits represents one channel from 0 (00) to 255 (FF). #FF0000 is pure red at maximum intensity. #D32F2F is a darker, more saturated red with red channel at 211, green at 47, and blue at 47.
The sRGB gamut covers a portion of all visible colors but not the entirety. It represents roughly 35 percent of the colors visible to the average human eye, according to CIE 1931 colorimetry data. Pantone colors, the standardized ink system developed by Lawrence Herbert at Pantone Inc. in 1963, include colors that exist outside the sRGB gamut. The Pantone Matching System was specifically designed to enable consistent color reproduction across different printing processes and manufacturers, using proprietary ink formulas rather than combinations of standard inks.
Vivid orange-reds, deep cobalt blues, and certain greens achievable with physical inks on paper have no direct sRGB equivalent. When a Pantone color is converted to HEX, the conversion produces the closest sRGB approximation, which may appear noticeably different when mixed as physical ink and printed on coated or uncoated paper stock.
This is also why a monitor and a printed page differ even for in-gamut colors. A monitor is an emissive display: it creates color by emitting light from red, green, and blue phosphors or LEDs. A printed page is a reflective surface: it creates color by absorbing certain wavelengths and reflecting others back to the viewer. The physical mechanism is fundamentally different. A printed color looks different under incandescent light, fluorescent light, and daylight. A monitor's output does not change with ambient lighting in the same way.
HSL and What It Actually Tells You
The HEX and RGB formats describe colors numerically in the sRGB space but give no intuitive information about the color's perceptual properties. HSL (Hue, Saturation, Lightness) was developed specifically to make color manipulation more intuitive by describing colors in human-perceptible terms.
Hue is the angle on the color wheel: 0 degrees is red, 60 degrees is yellow, 120 degrees is green, 180 degrees is cyan, 240 degrees is blue, and 300 degrees is magenta. Saturation describes how vivid the color is, from 0 percent (a neutral gray of the given lightness) to 100 percent (fully saturated, the purest form of that hue). Lightness describes brightness from 0 percent (black, regardless of hue) to 100 percent (white, regardless of hue), with 50 percent representing the pure color.
The HSL model was proposed by Alvy Ray Smith and others at NYIT in the late 1970s as a more intuitive alternative to direct RGB manipulation. It was adopted by CSS with the hsl() function in CSS Color Level 3. The advantage for designers is intuitive adjustment: to make a color lighter without changing its hue, you increase lightness. To make it less vivid, you decrease saturation. These same manipulations in HEX require changing multiple channel values in ways that are not obvious without calculation.
HSV (Hue, Saturation, Value) is closely related but uses Value instead of Lightness. At 100 percent Value and 100 percent Saturation, you get a pure color. At 0 percent Value, you get black. Design tools including Adobe Photoshop and Illustrator typically present HSV in their color pickers rather than HSL, while CSS uses HSL. The numeric values for the same color differ between the two systems.
CMYK and the Print Problem
CMYK is the color model used in four-color printing: Cyan, Magenta, Yellow, and Key (Black). The model is subtractive: ink layers absorb certain wavelengths, and the reflected light is what the viewer sees. Full Cyan and Magenta together produce blue. Full Cyan, Magenta, and Yellow theoretically produce black, but in practice they produce a muddy dark brown because physical inks are imperfect, which is why a separate Black channel was added.
Converting from RGB to CMYK is not lossless because the two color spaces do not perfectly overlap. Colors in the RGB gamut that fall outside the CMYK gamut are called out-of-gamut and conversion software must find the closest in-gamut approximation. There are four standard rendering intents for this mapping, defined in the ICC standard: Perceptual (compresses the whole gamut to fit), Relative Colorimetric (maps exactly where possible, clips out-of-gamut colors), Saturation (optimizes for vivid colors over accuracy), and Absolute Colorimetric (preserves absolute color appearance).
Different conversion algorithms and ICC profiles handle out-of-gamut colors differently, which is why the same HEX code can produce slightly different CMYK values when converted by different software. Professional print workflows manage this with device-specific ICC profiles, which characterize the particular combination of printer, ink, and paper stock being used.
For designers working across digital and print, the practical workflow implication is that digital colors are not reliable references for print colors. The correct approach is to select the print color first, in CMYK or Pantone, then derive the closest digital representation from that anchor. Working in reverse, from a screen-approved HEX code to print, routinely produces the unexpected color shift that fills print shops' complaint queues.
Conclusion
Color codes are shorthand for coordinates in specific color spaces, and different color spaces do not perfectly overlap. That gap is invisible on a single device in a controlled environment but appears whenever a color crosses from screen to paper, from one design application to another, or from a consumer display to a wide-gamut professional monitor. For web development and design work, conversion between HEX, RGB, HSL, and HSV is a routine need. ToolHQ's color code converter handles all of these with a live preview, making it straightforward to identify what a numeric code actually looks like and to translate it into the format a specific tool or workflow requires.
Frequently Asked Questions
Why does a Pantone color look different when converted to HEX?
Pantone colors cover a wider range than the sRGB color space used by HEX codes. Colors outside the sRGB gamut have no exact HEX equivalent; conversion finds the closest approximation, which may appear noticeably different.
What is the difference between HSL and HSV?
Both use Hue and Saturation. HSL uses Lightness (where 50% is a pure color, 0% is black, 100% is white). HSV uses Value (where 100% is a pure color at maximum brightness). Design software typically uses HSV while CSS uses HSL.
Why does a color look different on screen versus in print?
Screens emit light (additive color mixing using RGB). Printed surfaces reflect light (subtractive color mixing using CMYK). The physics differ, the gamuts differ, and some colors achievable in one medium cannot be reproduced in the other.
What does a HEX color code represent?
A HEX code represents three 8-bit values (0-255) for red, green, and blue channels in hexadecimal notation. #FF0000 is full red (255, 0, 0). #000000 is black. #FFFFFF is white.