Design Atlas
한국어
✎ Graphic, brand & print

CMYK vs RGB

Screens add light to make colour (RGB); print subtracts it with ink (CMYK) — so some of the vivid colours you see on screen simply can't be printed.

Also known as: 색 공간Color gamutGamut clipping
···
html
<div class="wrap">
  <div class="pane rgb"><div class="grad"></div><span class="tag">RGB · 화면</span></div>
  <div class="pane cmyk"><div class="grad"></div><span class="tag">CMYK · 인쇄</span></div>
</div>
css
.wrap{position:relative;display:flex;width:100%;height:100%}
.pane{position:relative;flex:1;overflow:hidden;display:flex;align-items:flex-end;padding:10px}
.pane+.pane{border-left:1px solid var(--line)}
.pane.cmyk{filter:saturate(.48) contrast(.88) brightness(.92)}
.grad{position:absolute;inset:-30%;background:linear-gradient(120deg,#00f6ff,#7dff2e,#ff2ec4,#ffe600);animation:hue 10s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.tag{position:relative;z-index:1;color:#fff;font:800 11px/1 system-ui,sans-serif;text-shadow:0 1px 8px rgba(0,0,0,.55);letter-spacing:.01em}

RGB is additive — red, green and blue light stack up all the way to white. CMYK is subtractive — cyan, magenta, yellow and black ink sit on paper and absorb light, which gives it a smaller reachable colour range (gamut) than RGB.

Neon greens, electric cyans and saturated oranges look fine on screen but fall outside a printer's CMYK gamut — printing them "clips" the colour down to something duller and darker. A design app's "CMYK preview" simulates this shift on screen before you actually print.

Work in CMYK mode from the start for print files, or convert the final file and look at how the colours actually shift. The demo shows the same gradient untouched (left, RGB) next to a print simulation (right, CMYK) — the right side visibly dulls.

When to use

Never sign off a print file by screen colour alone. If a brand colour is neon or fluorescent, consider a spot colour (→ spot-color) instead of trusting CMYK to reproduce it.