Cmyk Vs Rgb: It Matters in Attractive Designs

Cmyk Vs Rgb: It Matters in Attractive Designs

You’ve got a bangin’ new logo, and you want to use it on your business card. You get a winning one designed, and get some printed, but the colors don’t come out as expected. You’re disappointed and feel slighted.

What happened?

You didn’t get it designed in the right color mode, and your designer didn’t account for the color differences from on-screen to on paper. When I say color mode, I’m talking about RGB and CMYK. What the heck are those? Read on, and you’ll find out.


What is RGB?

RGB (red, green, blue) color mode is used to create any image digitally. You would use RGB color mode when you are making anything displayed on a screen.

rgb

You would use RGB with graphics on screen because the color scheme a monitor, LCD, digital camera, scanner, or anything similar would display is RGB color. So think about it this way. Before you turn on your screen, it’s black, right? Colors on your screen are created by mixing together red, blue, and green. They are then applied over the black at different intensities to create a particular hue displayed on the screen. When you mix these colors together equally, they make perfect white. That’s the science behind RGB! Now when and where exactly should you use it?

When to use RGB

If you’re creating something that will be displayed on a screen of any form, you would surely want to use RGB!

Brand

  • Logos
  • Any digital ads

Web Design

  • Icons
  • Buttons
  • Images (yes, even photographs have a color mode!)

Social Media

  • Post images
  • Profile Pictures
  • Cover photos
  • Ads
  • Photo comments

Videos
Illustrations

Best RGB file formats

Images on the web are saved out in 4 different file formats. Each one has a different advantage and downfall.

JPEG/JPG is the best in terms of file size for uploading to your site. You want to make sure you pay close attention to the file size and quality because the smaller the file size you get, the worse the quality will.

PNG is for transparency. So say you have a logo that you want to put on a colored background, and you don’t want an ugly white box around it. You would save it in png with a transparent background. PNGs are generally bigger in file size, and you want to avoid using them if you can. If you can do what you need to do with a jpeg by making the image’s background the same as the target area, you want to do that instead.

PSD is an industry-standard photoshop file format for making beautiful graphics that can be saved in any format because if you want to make changes, you DON’T want to have to redo an entire image. Keeping a copy in this format saves the layers and will avoid a headache should you need to make any edits.

GIF is for any animated graphics, although it should also be used sparingly unless lossy optimized, as these can tend to be more significantly large in file size.

Nowadays, you’ll want to serve your images in a nextgen format to improve page speeds and prevent image theft. If you’re on WordPress (and if you’re not, you should consider it!), there are several plugins available to optimize JPG, PNG, or GIF and deliver them as WebP. WebP is 90% smaller than either of those formats and will load lightning fast.

Webp is one of the most supported nextgen formats, but other file formats such as JPG XR and JPEG 2000 also exist. Make the switch early and save yourself the trouble later when everyone is using them.

So what is CMYK then? Why can’t you just use RGB? It matters, I promise.


What is CMYK?

cmyk
cartridges-828195_640

CMYK (cyan, magenta, yellow, key/black) color mode is used to design materials that will eventually be printed.

Have you ever set-up a printer? It does the first test print, and there are 4 little dots or lines or something similar that are cyan, magenta, yellow, and black. Now think about your ink cartridges.

They are usually also these specific colors. Your printer quite literally uses cyan, magenta, yellow, and black to print your material. So it only makes sense to optimize for it, so the colors come out the closest, right? If you’re not using red, green, and blue ink to print things, why would you use it for print design?

You wouldn’t!

When to use CMYK color mode

You would ONLY want to use CMYK for print designs or anything that would be printed.

Branding

  • Business Cards
  • Stationary
  • Stickers
  • Signs
  • Magnets

Branded Merchandise

  • Clothing, such as T-shirts or hats
  • Pens
  • Mugs
  • Bags, etc

Advertising

  • Posters
  • Flyers
  • Brochures
  • Vehicle wraps
  • Billboards
  • Newspaper ads

Product Packaging
Restaurant Menus

Best CMYK file formats

PDFS are one of the industry-standard final print deliverables to send to the printer. Your printer may request other files and that you send the PDF with a bleed to come out with the best-printed product.

AI is also a great format to save out any materials in, so you can go back and edit later in Adobe illustrator if changes need to be made to the proof.


Why does it matter?

So why does it matter? Because if you try to print something with RGB, the colors will appear stale and not appear as intended. The same goes if you try to use CMYK on a screen that doesn’t use those colors, it will come out faded and sad looking. That’s because the printer is trying to find colors that aren’t there and outputs the next closest thing, and the screen is trying to make colors it doesn’t have and doing the same! So make sure you get a designer who knows the difference.


How can I match colors?

pexels-kaboompics-com-5933

If you’re trying to match colors adequately, you always want to get an expert opinion (hi, it’s me!) to save yourself some time and effort. Whenever you’re doing a print design job, always, always, ALWAYS get a proof before going ahead with big jobs to avoid headaches and money wasted. There’s nothing worse than receiving a business card or flyer that you waited a long time for, only to have it look all wrong, and you want to throw it in the trash along with your hard-earned cash. Get a designer who won’t let that happen!

Heather-Gingrich

About the author

Heather Gingrich is an expert graphic designer and web developer with 10+ years of experience. She specializes in branding & logo design, web design & dev, and print design. Her strengths include persistent communication with her clients, time management, and excellent customer service. Heather wants to make the world of business online and offline a little bit easier to manage, and seeks to satisfy her clients to the fullest extent, assisting with numerous technical tasks that may prove challenging for them and taking the visual appeal of their brands to the next level.

Scroll to Top