What Is the Difference Between CMYK and RGB? Why Colors Change Between the Web and Print
You may use a vivid color on an event website, then find that it looks less saturated on the printed flyer. This is not necessarily a printing mistake. Screens and paper produce color in different ways, and the final result also depends on printing conditions. This article explains RGB and CMYK through a practical example of adapting an event announcement from the web to print.
RGB represents light; CMYK represents printing inks
RGB stands for Red, Green, and Blue, the three light components used to produce colors on a display. The common six-digit HEX (hexadecimal color code) and the CSS rgb() function used in web design normally specify colors in the standard sRGB color space. CSS (Cascading Style Sheets) controls the visual appearance of webpages. A color space defines how color numbers correspond to actual colors.
CMYK, by contrast, stands for Cyan, Magenta, Yellow, and Key (black). It describes colors formed using four printing inks. Ink on paper absorbs and reflects light rather than emitting light like a screen. CMYK numbers are generally expressed as ink percentages, but the actual result depends on the printing press, inks, paper, and color-conversion settings.
Printing systems also vary in their gamut—the range of colors they can reproduce. Some vivid RGB greens, blue-greens, and oranges may change in saturation or hue when converted to fit a particular printing condition. There is no single universal set of CMYK percentages that will reproduce every RGB color identically on every kind of paper.
Example: adapt a web event announcement into a printed flyer
Suppose you are designing an event announcement card for a website. Choose pale ivory #F8F5EF as the overall background and dark navy #263746 for its heading and description. Use vivid cyan #00A6B8 for a short decorative line next to the event date. For the sign-up button, use deep teal #0B6075 with white #FFFFFF text. This keeps the colors used for reading information separate from those used to create visual interest.
| Purpose | Web color and code | Reason |
|---|---|---|
| Page background | Ivory #F8F5EF | A restrained color over a large area |
| Heading and body text | Navy #263746 | A consistent color for readable information |
| Decorative line | Cyan #00A6B8 | A small accent next to the date |
| Sign-up button | Deep teal #0B6075 | A distinct background for the main action |
| Button text | White #FFFFFF | Pairs with the deep teal background |
On the website, dark navy text #263746 against ivory #F8F5EF has a contrast ratio of approximately 11.24:1, while white button text #FFFFFF against deep teal #0B6075 reaches about 7.13:1. Vivid cyan #00A6B8 against ivory #F8F5EF, however, has a ratio of only about 2.70:1. Keep the cyan as a nonessential decorative accent rather than normal-sized text or the only way of conveying information. The Web Content Accessibility Guidelines (WCAG) 2.2 generally require at least 4.5:1 contrast for normal-sized web text.
When transferring this design to a flyer, do not assume that the web cyan #00A6B8 has one fixed, correct CMYK conversion. Check how its saturation changes under the intended printing conditions, and adjust the accent or surrounding colors if necessary. A palette displayed on a screen is not a reliable proof of its final printed appearance.
How to reduce unexpected color changes before printing
Start by asking the print provider which file format and color profile it requires. A color profile describes how numerical color values relate to reproduced colors. Some print providers accept RGB files with embedded profiles and perform the appropriate CMYK conversion within their production workflow. Others require files converted to a specific CMYK profile or supplied as PDF/X. Do not automatically convert everything to CMYK before submitting it; follow the provider’s requirements.
Next, choose the profile for the intended printing conditions and perform a soft proof, a screen-based simulation of the printed result. Examine gamut warnings and pay particular attention to the vivid cyan accent #00A6B8. Adjust the design where necessary. For important promotional materials, inspecting a physical proof on paper similar to the final stock provides another useful check. Soft proofing is a prediction, not a guarantee that a display and paper will match perfectly.
HueRoll displays HEX, RGB, CMYK, and other color values, but its CMYK numbers are reference values only. They are not color-proofing values calculated for a particular press, ink, paper, or output profile. Do not use them alone to predict a print result. For the web, assess the on-screen palette and text contrast; for print, apply the output-specific conversion and proofing process.