Skip to main content

​
The Fundamental Difference

RGB and CMYK are opposite color models:
AspectRGBCMYK
MethodAdditive (adds light)Subtractive (absorbs light)
MediumLight emissionInk on paper
BlackAbsence of light (0,0,0)All inks mixed
WhiteAll light (255,255,255)No ink (paper white)
Channels3 (Red, Green, Blue)4 (Cyan, Magenta, Yellow, Black)
GamutWider (more colors)Narrower (fewer colors)
UseScreens, digitalPhysical printing
Key Insight: RGB creates color by adding light. CMYK creates color by subtracting (absorbing) light from white paper.

​
How RGB Works (Additive Color)

RGB is based on light emission: 
Start with darkness (black)
+ Red light
+ Green light
+ Blue light
= White light

​
RGB Color Mixing

  • Red + Green = Yellow
  • Red + Blue = Magenta
  • Green + Blue = Cyan
  • All three = White
  • None = Black

​
RGB Value Ranges

Each channel: 0-255 (256 levels)
  • Total combinations: 16,777,216 colors
  • Example: rgb(255, 0, 0) = Pure red

​
RGB Color Spaces

SpaceGamut SizeUse Case
sRGBStandard (smallest)Web, general use
Adobe RGBWiderProfessional photo
ProPhoto RGBWidestHigh-end photography
Display P3WideApple devices

​
How CMYK Works (Subtractive Color)

CMYK is based on ink absorption: 
Start with white paper
+ Cyan ink (absorbs red, reflects blue+green)
+ Magenta ink (absorbs green, reflects red+blue)
+ Yellow ink (absorbs blue, reflects red+green)
+ Black ink (absorbs all light)
= Desired color

​
CMYK Color Mixing

  • Cyan + Magenta = Blue
  • Cyan + Yellow = Green
  • Magenta + Yellow = Red
  • C+M+Y = Muddy brown (not true black)
  • Add K (Black) = Clean blacks and shadows

​
CMYK Value Ranges

Each channel: 0-100%
  • C50 M0 Y100 K0 = Lime green
  • C100 M100 Y0 K0 = Blue
  • C0 M0 Y0 K100 = Black

​
Why “K” for Black?

Three theories:
  1. Key plate - carries the key image details
  2. blacK - distinguish from Blue (B)
  3. Keyline - black outline in registration
Most likely: “K” = Key plate in traditional four-color printing.

​
The Gamut Gap

Not all RGB colors can be printed in CMYK: 
Visible Spectrum
┌─────────────────────────────┐
│ RGB Gamut                   │
│ ┌────────────────────┐      │
│ │ CMYK Gamut         │      │
│ │ ┌──────────┐       │      │
│ │ │ Common   │       │      │
│ │ │ Colors   │       │      │
│ │ └──────────┘       │      │
│ └────────────────────┘      │
└─────────────────────────────┘

Overlap = Colors that exist in both
RGB only = Screen colors that can't print
CMYK only = Very rare (some dark browns)

​
Out-of-Gamut Colors

Most problematic RGB colors:
  • Bright neon blues (electric blue)
  • Pure cyan (#00FFFF)
  • Lime green (#00FF00)
  • Pure magenta (#FF00FF)
  • Bright orange (#FF6600)
These colors will shift when converted to CMYK - it’s unavoidable.

​
Conversion Process

​
How Conversion Works

1

1. Analyze RGB Values

Plugin reads RGB color: e.g., rgb(0, 128, 255)
2

2. Apply ICC Profile

Uses selected profile (e.g., ISO Coated v2) as conversion rules
3

3. Map to CMYK

Calculates closest CMYK equivalent
4

4. Apply Rendering Intent

Handles out-of-gamut colors based on intent selected
5

5. Check Ink Limits

Ensures total ink coverage doesn’t exceed 300%
6

6. Embed in PDF

Creates CMYK PDF with embedded profile

​
Color Conversion Examples

  • Example 1: Red
  • Example 2: Blue
  • Example 3: Green
  • Example 4: Gray
RGB: rgb(255, 0, 0) - Pure red CMYK: C0 M100 Y100 K0 Result: ✅ Converts well (in both gamuts)

​
When to Use Which

​
Use RGB When:

✅ Designing for screens - Websites, apps, presentations ✅ Initial design phase - Native Figma color space ✅ Digital-only deliverables - No physical printing ✅ Video/motion graphics - Screen-based media

​
Use CMYK When:

✅ Printing physically - Anything on paper or substrate ✅ Final print files - Pre-press and production ✅ Color-critical prints - When accuracy matters ✅ Communicating with printers - Industry standard
Never design in CMYK in Figma! Always design in RGB and convert for export. This gives you the most flexibility and compatibility.

​
Black Handling: K vs CMY

Two ways to create black in CMYK:

​
1. Pure Black (K100)

  • Value: C0 M0 Y0 K100
  • Ink: Only black ink
  • Uses: Body text, small type, thin lines
  • Pros: Crisp, no registration issues, saves ink

​
2. Rich Black (4-Color Black)

  • Value: C40 M30 Y30 K100 (typical recipe)
  • Ink: All four inks
  • Uses: Large black areas, backgrounds, headlines
  • Pros: Deeper, richer black appearance
Pure Black (K100):
Adequate for text

Rich Black (C40 M30 Y30 K100):
Luxurious, deep, intense
Rule of Thumb: Use K100 for text under 24pt. Use rich black for large areas.

​
Total Ink Coverage (TAC)

TAC = Total Area Coverage - the sum of all four CMYK percentages

​
Why It Matters

  • Too much ink = Smearing, drying problems, paper saturation
  • Most printers limit TAC to 280-320%

​
Example Calculation

Color: C80 M70 Y60 K40
TAC = 80 + 70 + 60 + 40 = 250%
✅ Within safe limits (under 300%)

Color: C100 M100 Y100 K100
TAC = 100 + 100 + 100 + 100 = 400%
❌ Too much! Will cause problems
Print for Figma automatically manages TAC based on your selected ICC profile. You don’t need to calculate manually, but understanding helps!

​
Color Management Strategies

​
Strategy 1: Design CMYK-Friendly

Approach: Choose colors that exist in both gamuts How:
  • Avoid neon/fluorescent colors
  • Test colors in CMYK preview
  • Use CMYK color picker if available
Pros: Minimal color shift Cons: Limits creative palette

​
Strategy 2: Design Freely, Convert Carefully

Approach: Design in RGB, carefully manage conversion How:
  • Design with any colors
  • Use high-quality ICC profiles
  • Preview before finalizing
  • Adjust problem colors manually
Pros: Full creative freedom Cons: Requires color management knowledge

​
Strategy 3: Hybrid (Spot Colors)

Approach: CMYK for most, spot colors for critical hues How:
  • Use CMYK for photos and most graphics
  • Add Pantone spot colors for logos and brand colors
  • Combine in same document
Pros: Best of both worlds Cons: More expensive printing (extra plates)

​
Previewing CMYK Conversion

How to see how colors will print:

​
In Print for Figma

1

Enable CMYK

Color tab → Convert to CMYK ✓
2

Select ICC Profile

Choose appropriate profile for your printing
3

Preview

Plugin shows color conversion preview
4

Adjust

If colors shift too much, adjust RGB values or use spot colors

​
In Adobe Acrobat

After exporting:
  1. Open PDF in Acrobat
  2. Tools → Print Production → Output Preview
  3. Enable CMYK simulation
  4. See how colors will actually print

​
Common Misconceptions

​
Myth 1: “CMYK is always better for print”

Reality: Design in RGB (Figma’s native), convert to CMYK for export. Best of both worlds.

​
Myth 2: “My screen can show CMYK accurately”

Reality: Your screen is RGB. It can only simulate CMYK. Physical proofs are the only true preview.

​
Myth 3: “If it looks good in RGB, it’ll print fine”

Reality: Some RGB colors can’t be reproduced in CMYK. Always preview conversion.

​
Myth 4: “CMYK files are smaller”

Reality: CMYK files are usually larger (4 channels vs 3).

​
Advanced: GCR vs UCR

Two methods for generating black (K) channel:

​
GCR (Gray Component Replacement)

  • Replaces CMY gray with K where possible
  • Creates lighter, more stable print
  • Recommended for most projects
  • Less ink usage

​
UCR (Under Color Removal)

  • Only removes CMY under black areas
  • Darker shadows
  • More traditional method
  • Used for specific effects
Print for Figma uses GCR by default with ICC profiles - the modern standard for professional printing.

​
Quick Reference

FactorRGBCMYK
ModelAdditiveSubtractive
Channels34
Max Values0-255 each0-100% each
Total Colors16.7 million~Thousands (varies)
Black0,0,00,0,0,100
White255,255,2550,0,0,0
UseScreenPrint
GamutWiderNarrower

​
Next Steps

ICC Profiles Explained

Master ICC profile selection

Spot Colors Guide

When to use Pantone colors

Black Handling

Pure black vs rich black strategies

Color Troubleshooting

Fix common color problems
Deep dive into color science? Our Discord community has color experts who love discussing this stuff!