Color Systems: RGB, CMYK, Pantone & Print Conversion

Format

This color

Typical use

HEX

#10B981

CSS / design handoff

RGB

rgb(16, 185, 129)

Screens (additive primaries)

HSL

hsl(160, 84%, 39%)

CSS tweaks — lighten/darken by L

HSV

160°, 91%, 73%

Color pickers (PS/Figma)

CMYK

91/0/30/27%

Print (subtractive, device-dependent)

Color Systems: RGB, CMYK, Pantone & Print Conversion

Updated 2026.08.01~3 min read

RGB (screen, additive) vs CMYK (print, subtractive) — gamuts differ: vivid screen blues/greens cannot print exactly. Pantone = premixed spot inks for brand consistency. Convert RGB→CMYK at export, expect dulling on saturated colors, and always proof brand colors physically.

Key Takeaways

Additive vs subtractive: RGB adds light (black screen → white); CMYK subtracts (white paper → ink absorption)

Gamut gap: CMYK reproduces ~70-80% of RGB brights — electric blues and neon greens suffer most

Pantone: numbered premixed inks (e.g., PMS 286 C) — the brand-color guarantee across printers

Rule: design in RGB, convert to CMYK late, proof physically before mass printing

Core answer: HEX #RRGGBB is just RGB in hexadecimal: #FF8000 = rgb(255, 128, 0). Convert channel by channel: hex→decimal (FF=255, 80=128, 00=0), or decimal→hex (128 = 8×16+0 = 80). HSL remaps the same color to hue (0–360°), saturation, lightness — designers tweak HSL, developers write HEX, and #FF0000 = rgb(255,0,0) = hsl(0°, 100%, 50%) are the exact same red.

HEX ↔ RGB in 10 seconds

Hex digits: 0–9 then A=10, B=11, C=12, D=13, E=14, F=15. Two-digit hex value = first×16 + second.

HEX	Math	Decimal
FF	15×16+15	255
80	8×16+0	128
A3	10×16+3	163
0D	0×16+13	13

Shorthand: #F80 expands to #FF8800 (each digit doubles). Alpha channel: #FF8000CC adds CC = 80% opacity.

HSL: the human-friendly dial

Hue (0–360°): 0 red, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta.
Saturation: 0% = gray, 100% = vivid.
Lightness: 0% black, 50% pure color, 100% white.

Design systems love HSL because "same color, lighter" = same H and S, raise L — no hex math. A hover state is often just L −8%.

Worked examples

Example 1 — Brand color to CSS. Brand guide says PMS-approximate rgb(16, 185, 129): 16 = 10, 185 = B9, 129 = 81 → #10B981 — yes, that's the emerald on this very site.

Example 2 — Reading a screenshot. Color picker grabs #3B82F6: 3B = 59, 82 = 130, F6 = 246 → rgb(59, 130, 246), a sky blue; HSL ≈ hsl(217°, 91%, 60%).

Example 3 — Making a palette. Primary hsl(160°, 84%, 39%): hover = same H/S, L 32%; muted background = S 30%, L 96%; disabled = S 10%, L 60%. One hue, whole system.

Example 4 — 8-digit alpha. 50% black overlay = #00000080 (80 hex = 128 ≈ 50%); 25% white = #FFFFFF40.

Common mistakes and myths

Confusing #FFF vs #FFFFFF — they're identical (shorthand doubles each digit); #F0F is #FF00FF magenta, not a light gray.
HSL 50% lightness ≠ perceived brightness — yellow at 50% L looks far brighter than blue at 50% L; for perceptual work use OKLCH/HSLuv.
Screen vs print — RGB (light, additive) can't express CMYK (ink, subtractive) gamuts fully; that neon green will dull in print. Convert via the printer's ICC profile, not naive formulas.
Assuming hex is color-managed — #FF0000 differs between sRGB and Display-P3 screens; wide-gamut devices need color(srgb …) or oklch() in modern CSS.
Alpha compositing surprises — 50% black over white gives #808080, but over red gives #800000 — semi-transparent overlays shift hue, so test on real backgrounds.

Frequently Asked Questions

What is the difference between RGB and CMYK?

RGB adds light on screens: R+G+B at full = white; zero = black. CMYK subtracts light on paper: cyan/magenta/yellow inks absorb wavelengths; K (black) added because CMY mixing yields muddy brown, not true black — and black text in one ink is sharper and cheaper. Same color, opposite physics: screens emit, paper reflects. A design lives in RGB until it must exist in ink.

Why do printed colors look duller than on screen?

Gamut: screens produce saturated light (pure blue at full intensity); ink absorbs imperfectly — the CMYK gamut is smaller, especially in vivid blues, greens and neon tones. Out-of-gamut colors get clipped to the nearest printable equivalent during conversion. Paper matters too: uncoated stock absorbs more ink and mutes further. This is physics, not a printer defect — manage it by soft-proofing and adjusting expectations early.

What is Pantone and when do I need it?

PMS (Pantone Matching System): numbered, premixed spot inks printed as a single plate — PMS 286 C is the same ink in Shenzhen and Stuttgart. Use it for: brand logos on critical items (packaging, signage), colors outside CMYK gamut (vivid oranges, metallics, fluorescents), and 1-2 color jobs (cheaper than full CMYK). Cost: each spot color = one extra plate. Digital/short-run printing is CMYK-only — Pantone gets simulated, approximately.

How should I convert RGB to CMYK?

At export, in the design tool (Photoshop/Illustrator), using the printer's ICC profile (e.g., FOGRA, GRACoL, or the local shop's) — never let the RIP auto-convert blindly. Then soft-proof: view through the CMYK profile to preview the dulling, and manually rescue critical colors. Rich black for large fills: C40 M30 Y30 K100 (not 100K alone, which prints charcoal-ish gray... actually dark gray); body text: K100 only for crisp edges.

What print specs accompany color?

Resolution 300 DPI at final size (72 DPI screens lie); bleed 3 mm beyond trim (backgrounds must extend — no white slivers after cutting); safe margin 3-5 mm inside trim for text; total ink coverage ≤ 300% (more smears and never dries); embed/convert fonts to outlines; export PDF/X standards. These six prevent 90% of print-shop rejection calls.

What mistakes happen with color conversion?

(1) Sending RGB files to print and being surprised by the mud; (2) approving color on an uncalibrated bright screen (screens are backlit and generous; proof under D50 light); (3) hex codes as a print spec (they mean nothing in ink — give CMYK values or Pantone numbers); (4) K-only large black areas (washed out — use rich black); (5) 4-color black text (registration misalignment blurs tiny glyphs — K100 only); (6) assuming the same CMYK values print identically on coated vs uncoated stock (they do not — specify the paper); (7) skipping the physical proof for a 10,000-unit run to save ¥500 — the classic false economy.

Where each format is used

Color Systems: RGB, CMYK, Pantone & Print Conversion

Key Takeaways

HEX ↔ RGB in 10 seconds

HSL: the human-friendly dial

Worked examples

Common mistakes and myths

Frequently Asked Questions

Where each format is used