🖥️ vs 🖨️ Screen vs Print
RGB and CMYK are the two most important color models in design. RGB is for digital screens, while CMYK is for print. Understanding when to use each prevents colors from looking different than intended.
Quick Comparison
- Full Name: Red, Green, Blue
- Type: Additive color model
- Use: Digital screens, web design
- Colors: 16.7 million possible
- Format: rgb(255, 0, 0), #FF0000
- Full Name: Cyan, Magenta, Yellow, Key (Black)
- Type: Subtractive color model
- Use: Print design, physical media
- Colors: Thousands (limited)
- Format: cmyk(0, 100, 100, 0)
How RGB Works
RGB is an additive color model used for screens. It works by adding colored light together. Screens have red, green, and blue pixels that light up at different intensities to create colors.
Colors get lighter as you add more light:
- ✓ Website design
- ✓ Mobile apps
- ✓ Digital graphics
- ✓ Social media images
- ✓ Video and animation
- ✓ Digital photography
- ✓ Email marketing
- ✓ Any screen-based design
Key Point: Use RGB/HEX for anything displayed on a screen. This is the default for most design software and web development.
How CMYK Works
CMYK is a subtractive color model used for printing. It works by using inks that absorb (subtract) light. The more ink you add, the darker the color becomes.
Inks absorb light - combining them creates darker colors:
- ✓ Business cards
- ✓ Brochures and flyers
- ✓ Packaging design
- ✓ Magazines and books
- ✓ Posters and banners
- ✓ Clothing and merchandise
- ✓ Any printed material
- ✓ Physical products
Key Point: Design in CMYK from the start for print projects. What you see on screen may not match what prints due to gamut differences.
The Gamut Problem
Not all RGB colors can be reproduced in CMYK. This is called gamut difference. Some vibrant RGB colors appear duller when printed.
Bright Red → Muddy Red
Pure RGB reds lose their vibrancy when converted to CMYK
Neon Blue → Dark Blue
Bright, electric blues become much darker in print
Lime Green → Olive Green
Bright greens turn more yellow and dull
💡 Pro Tip
Always check your colors in CMYK mode before sending to print. Use "gamut warning" in Photoshop to identify problematic colors.
Color Conversion Examples
Here's how colors convert between RGB and CMYK, along with HEX codes for web use.
| Color | RGB | HEX | CMYK |
|---|---|---|---|
Red | rgb(255, 0, 0) | #FF0000 | cmyk(0, 100, 100, 0) |
Green | rgb(0, 255, 0) | #00FF00 | cmyk(100, 0, 100, 0) |
Blue | rgb(0, 0, 255) | #0000FF | cmyk(100, 100, 0, 0) |
Yellow | rgb(255, 255, 0) | #FFFF00 | cmyk(0, 0, 100, 0) |
Purple | rgb(128, 0, 128) | #800080 | cmyk(60, 100, 0, 40) |
Orange | rgb(255, 165, 0) | #FFA500 | cmyk(0, 50, 100, 0) |
Best Practices
- ✓ Always design in RGB for screens
- ✓ Use HEX codes in CSS (#FF0000)
- ✓ Test on multiple devices
- ✓ Consider dark mode variants
- ✓ Ensure sufficient contrast
- ✓ Use sRGB for web compatibility
- ✓ Design in CMYK from the start
- ✓ Use Pantone for brand colors
- ✓ Request printed proofs
- ✓ Check gamut warnings
- ✓ Use 300 DPI minimum
- ✓ Convert text to outlines
Key Takeaways
- ✓RGB is additive for screens (light), CMYK is subtractive for print (ink)
- ✓Always use RGB/HEX for web design and digital projects
- ✓Design in CMYK from the start for any print project
- ✓Not all RGB colors can be printed - check gamut before printing
- ✓Always request a printed proof for important print jobs