RGB vs CMYK vs HEX: screen color, print color and how to convert between them

RGB and CMYK are color models for different media: RGB mixes red, green and blue light for screens, and CMYK mixes cyan, magenta, yellow and black ink for print. HEX is not a third model; it is RGB written in hexadecimal. Use RGB or HEX for anything shown on a display, and CMYK, converted with your printer's ICC profile, for anything printed.

Additive vs subtractive color

A screen starts dark and adds light. Each pixel has red, green and blue subpixels; turning all three to full gives white, rgb(255, 255, 255), and turning them off gives black. This is additive color, and it is why the primaries of the RGB model are the colors of light.

Paper starts white, and ink takes light away. Cyan ink absorbs red, magenta absorbs green and yellow absorbs blue, so each ink subtracts one RGB primary from the light bouncing off the page. Stack all three at full strength and in theory you absorb everything and get black. In practice you get a muddy dark brown, and that much ink is costly and slow to dry, so printers add a fourth ink, K for key, a true black. That is subtractive color.

Where HEX fits

HEX is only notation. #FF6347 and rgb(255, 99, 71) are the same tomato red, written in base 16 and base 10. A "HEX color" is never different from its RGB equivalent, and there is no HEX for print. When a printer asks for your brand colors, a HEX value tells them what the color looks like on screen, not which inks to use. The same is true of hsl() and oklch(): every CSS color notation describes screen color, and each one needs converting before it can go to press. The hex color codes guide explains how the hex encoding works.

Gamut: what each model can show

A gamut is the range of colors a device or color space can reproduce. sRGB, the standard web color space, and a typical CMYK press overlap heavily but not completely:

• Bright, saturated screen colors such as #00FF00 green, #0000FF blue and vivid oranges fall outside a typical CMYK gamut, so they print duller.
• Some printable colors, notably certain cyans, fall outside sRGB, so a standard screen cannot show them exactly.
• Paper matters: uncoated stock has a smaller gamut than coated stock, so the same file prints flatter on it.

Wide-gamut Display P3 screens widen the gap further. A color you pick on a P3 laptop may sit outside both sRGB and CMYK.

Why screen-to-print color shifts happen

The formula most converters use is simple. With channels scaled to 0 to 1, K = 1 − max(R, G, B), then C = (1 − R − K) / (1 − K), and the same pattern gives M from green and Y from blue. For tomato, R is 1, G is 99 ÷ 255 = 0.388 and B is 71 ÷ 255 = 0.278, so K = 0, C = 0%, M ≈ 61% and Y ≈ 72%.

The reverse formula is R = 255 × (1 − C) × (1 − K), with M giving green and Y giving blue in the same way. Converting C 0%, M 61%, Y 72%, K 0% back gives 255, 99.45 and 71.4, which round to tomato's 255, 99 and 71 again. That tidy round trip only works on paper, because neither direction knows anything about real ink.

That formula assumes perfect inks on perfect paper. Real inks are impure, paper is not perfectly white, printed dots spread as ink soaks in (dot gain), and every press has a limit on how much total ink one spot can carry. The formula knows none of this, so its result is a reasonable first guess, not a press-ready value. It turns pure green #00FF00 into C 100%, Y 100%, a mix that prints noticeably duller than the screen shows. It also gives the thinnest possible black: #000000 becomes K 100% alone, which looks slightly washed out on large areas. Printers often ask for a rich black instead, such as C 60, M 40, Y 40, K 100, so ask yours for their recipe.

ICC profiles: the real conversion

An ICC profile describes how a specific device or printing condition reproduces color. A proper conversion goes from your RGB space, usually sRGB, through a device-independent reference space to a CMYK profile that matches the paper and press: FOGRA39 for coated paper in Europe, for example, or GRACoL and SWOP for common US printing conditions. The profile encodes ink behavior, the total ink limit and how black is generated, and the conversion uses a rendering intent to decide what happens to out-of-gamut colors.

Because each profile is tied to a printing condition, there is no single correct CMYK value for a HEX color. The same tomato red converts to different CMYK numbers for coated and uncoated paper, and that is the point: each set produces the closest match on its own stock.

A practical workflow for web and print

1. Define brand colors per medium. Keep a HEX value for screens and a separate CMYK value or spot color for print, each chosen to look right in its medium, rather than deriving one mechanically from the other.
2. Design screen work in sRGB. Specify colors as HEX, rgb() or oklch(), and check text contrast.
3. Get the printer's profile before converting. Ask which ICC profile and total ink limit they want.
4. Convert in your layout or image software with that profile, and turn on soft proofing and gamut warnings to find colors that will shift.
5. Adjust out-of-gamut key colors by eye instead of accepting whatever the conversion picks.
6. Order a hard proof for color-critical jobs. A calibrated monitor gets close, but only ink on the actual paper is final.
7. Use a spot color for brand colors CMYK cannot reach, such as bright oranges and greens.
8. Deliver the right files. Save web images in sRGB, and send print work in the format your printer specifies, commonly PDF/X with the output profile embedded.

Try it: see RGB, HEX and CMYK together

The color converter shows any color as HEX, RGB, HSL, HSV, OKLCH and CMYK at once. Its CMYK output uses the formula above, so treat it as a starting point for a conversation with your printer, not a press value. For screen work, set exact channel values in the color picker, and use the RGB to HEX converter when a spec gives you decimal channels and your CSS needs a hex code. The RGB vs HSL vs OKLCH guide covers the other screen formats you will meet in CSS.