Understanding Color Models
Color mixing is fundamental to both light-based digital media and ink-based printing. However, these two contexts use completely different color models based on fundamentally different physical principles.
The distinction between additive (RGB) and subtractive (CMYK) color mixing is one of the most important concepts in design. Using the wrong color model for your medium leads to unexpected colors, wasted printing materials, and frustrated clients or users.
Additive Color (RGB)
Additive color mixing starts with darkness and adds light to create colors. This is how screens work: pixels emit light in red, green, and blue wavelengths. By combining these three colors of light in different intensities, screens create every color we see.
In additive color:
- Starting point: Black (no light)
- Primary colors: Red, Green, Blue (RGB)
- Mixing: Adding light together
- Result: RGB(255, 255, 255) = White (all light combined)
Think of additive color like shining colored spotlights on a black stage. When you turn on a red spotlight, you see red. Turn on a green spotlight, you see green. Turn on both red and green spotlights, you see yellow (because red light + green light = yellow light). Turn on all three spotlights (red, green, and blue) at full brightness, the stage appears white.
RGB Color Examples
- Red light + Green light = Yellow light
- Green light + Blue light = Cyan light
- Red light + Blue light = Magenta light
- Red light + Green light + Blue light = White light
- No light = Black
RGB in Web and Screens
All digital displays use additive color. Monitors, tablets, smartphones, and TVs all create color by emitting red, green, and blue light. This is why web design uses RGB or HEX (which is RGB in hexadecimal notation).
Colors in RGB are specified as values from 0-255 for each channel:
- RGB(0, 0, 0) = Black (no light)
- RGB(255, 0, 0) = Pure red
- RGB(0, 255, 0) = Pure green
- RGB(0, 0, 255) = Pure blue
- RGB(255, 255, 255) = White
Subtractive Color (CMYK)
Subtractive color mixing starts with white (or the color of the paper) and subtracts color by applying inks or pigments. This is how printing works: inks absorb (subtract) light wavelengths, leaving reflected light that our eyes perceive as color.
In subtractive color:
- Starting point: White (paper or substrate)
- Primary colors: Cyan, Magenta, Yellow (CMY)
- Mixing: Applying inks that subtract light
- Result: CMYK(100%, 100%, 100%, 0%) = Black (theoretically; practically, black is added)
Think of subtractive color like painting with watercolors on white paper. White paper reflects all light. When you paint blue, the blue pigment absorbs red and green light, reflecting only blue. When you paint red over blue, the red pigment absorbs green and blue light from what's already there. Where the colors overlap, more light is absorbed, creating darker colors.
CMYK Color Examples
- Cyan ink + Yellow ink = Green
- Magenta ink + Yellow ink = Red
- Magenta ink + Cyan ink = Blue
- Cyan ink + Magenta ink + Yellow ink = Black (theoretically)
- No ink = White (the paper color)
The K in CMYK
CMYK includes a fourth ink, K (black or Key), for practical and economic reasons. Pure CMY inks mixed together theoretically create black, but in practice, they create a muddy brown. Additionally, using black ink is more economical than using equal amounts of three colored inks to create black. Modern printers add black ink to ensure true blacks and reduce ink consumption.
CMYK in Printing
All traditional printing (offset, digital printing, inkjet, etc.) uses subtractive color with CMYK inks. Print designers must work in CMYK to ensure colors print accurately.
CMYK colors are specified as percentages (0-100%) for each ink:
- CMYK(0%, 0%, 0%, 0%) = White (no ink)
- CMYK(100%, 0%, 0%, 0%) = Cyan
- CMYK(0%, 100%, 0%, 0%) = Magenta
- CMYK(0%, 0%, 100%, 0%) = Yellow
- CMYK(0%, 0%, 0%, 100%) = Black
- CMYK(100%, 100%, 100%, 0%) = Muddy brown (or approximately black without the K)
Key Differences Between RGB and CMYK
Color Gamut
The range of colors that can be created differs significantly between RGB and CMYK.
RGB has a larger color gamut (range of colors). Screens emit light directly, allowing for a wider range of colors than inks can reflect.
CMYK has a smaller color gamut. Inks are limited by their ability to absorb light. Many bright, vibrant colors in RGB cannot be accurately reproduced in CMYK.
This is why a bright neon green color on screen might look dull and muddy when printed. The printer cannot reproduce that exact green because it's outside the CMYK color gamut.
Brightness and Vibrancy
RGB colors can be arbitrarily bright (up to white). Increasing RGB values increases brightness.
CMYK colors are limited by the substrate (paper) brightness. You cannot make a CMYK color brighter than the paper it's printed on.
Color Conversion
Converting from RGB to CMYK is not a simple formula. Different conversion methods produce different results. Professional color conversion requires careful calibration and profiling.
When converting RGB to CMYK:
- Bright RGB colors may become muted CMYK colors
- The specific conversion method affects the result
- Color management and ICC profiles are important for accuracy
Converting from CMYK to RGB is theoretically possible but is rarely done because CMYK colors are typically less vibrant than what RGB could display.
When to Use Each Color Model
Use RGB For:
Web design and web applications (screens use RGB) Digital media (video, photography displayed on screens) Digital design tools where output will be screen-based Any color work for screen-based final delivery
Use CMYK For:
Print design (business cards, brochures, posters) Packaging design Any design that will be printed Large format printing
Mixed Media Considerations:
For materials that will both be viewed on screen and printed, design in RGB (if the primary output is screen) or CMYK (if the primary output is print), then convert appropriately for the other medium.
Understand that conversions will change colors. Have the conversion process planned and tested before finalizing designs.
Common Color Challenges in Conversion
Bright Screen Colors Becoming Muted in Print
A bright lime green (RGB(0, 255, 0)) on screen might convert to a muted yellowish-green in CMYK printing because pure green is outside the CMYK gamut.
Solution: When designing for print, use CMYK from the start. When designing for print, use less vibrant colors that are within the CMYK gamut.
Different Colors on Different Screens
RGB colors might display differently on different screens due to calibration, display technology, and ambient lighting.
Solution: Calibrate monitors for color-critical work. Use color management with ICC profiles.
Print Colors Not Matching Digital Proof
Even when converting RGB to CMYK correctly, printed colors might not match screen expectations.
Solution: Understand that screen display and print are fundamentally different. A color that looks right on screen might not look the same in print. Get print proofs before large-scale printing.
Color Management
For accurate color reproduction, color management is important:
Use ICC profiles to standardize color conversion between devices.
Calibrate monitors so screen colors accurately represent what you're designing.
Use color-managed applications (professional design software) rather than relying on browser color display.
For print work, use the appropriate CMYK profile for the specific printing method and paper type.
Understand that perfect color matching between screen and print is impossible due to fundamental differences in how the media work. The goal is getting colors as close as practically possible.
Practical Implications for Designers
If you're designing for web, use RGB. Think about your colors in terms of light and mixing red, green, and blue light.
If you're designing for print, use CMYK from the start. Convert your brand colors to CMYK and use those values consistently in print designs.
If you're designing brand guidelines that include both screen and print, define colors in both RGB and CMYK. Ensure the conversions are intentional and the results are acceptable.
If you're converting from RGB to CMYK or vice versa, understand that some colors cannot be accurately converted. Plan for this and adjust colors as needed.
Understand the color gamut limitations. The vibrant neon colors you see on screen cannot be reproduced in print. If bright colors are essential to your design, plan to adjust them for print output.
The fundamental difference between additive (RGB) and subtractive (CMYK) color mixing reflects the physics of different media: screens emit light, while prints reflect light. Understanding these differences allows designers to work effectively in their chosen medium and make informed decisions when color conversion is necessary.
