If you’ve heard anyone talk about brand identity before, you know that a consistent color palette is key to a recognizable brand. It’s hard to forget the red and yellow McDonald’s sign, the purple and orange FedEx logo, or the green and white Starbucks siren. Having consistent colors in your brand is key for brand identity, but keeping color consistent can often be difficult. Overall, color seems like a simple concept, but as you look further, there’s a lot to unpack, especially when it comes to software and printing. If understanding color in design feels like reading a foreign language, we’re here to help decipher it.
Primary colors are where we begin in color theory, because without them, we wouldn’t have any other colors. They are called primary colors because they cannot be created by a combination of any other colors. These colors will be different depending on which color mode you use (more on that later). Secondary colors, however, are created when equal parts of two primary colors are combined. Tertiary colors are made by combining a primary and secondary color. All of these 12 colors combined form a traditional color wheel. In their unchanged state here on the color wheel, they are called hues. Starting with one of these 12 hues, we can change certain aspects of it to create a new color.
By adding black or white to a hue, we can change the value of a color.
Value is, essentially, how dark or light a hue is.
Saturation is the intensity or dullness of a color. We can change a hue’s saturation by adding gray.
Temperature is determined by how “warm” or “cool” a color is relative to another color. We often split the color wheel in half, dividing the warm colors (reds, oranges, and yellows) from the cool colors (greens, blues, and purples). However, there can be warmer or cooler colors within the same hue, by adding varying degrees of yellow or blue. Take green for example. Pure green is an equal mix of both yellow and blue. However, warmer greens will have more yellow (think olive green or chartreuse) and cooler greens will have more blue (think evergreen or teal).
Your designs will probably appear in many different formats, like screen or print, and the format greatly affects how your audience perceives your design. Because the colors of your design can change so much based on where they are viewed, you’ll need to know the correct color mode for each medium. It’s important to understand color modes so you can feel confident that you’ve chosen the correct option.
There are two processes for producing color: additive and subtractive. The additive process uses light to produce color, while the subtractive process uses physical materials. Additive colors start out as black and become lighter as red, blue, or green light is added, producing a certain color, while subtractive colors begin as white, and pigment is added to create a color. Because the additive process uses light, color modes that use this process will be onscreen, while color modes that use the subtractive process will be in print.
RGB – This color mode uses red, green, and blue light to create a wide variety of colors. Because RGB uses the additive process, it is only used in digital formats. This color mode is best for anything that will be viewed on a digital device, like a logo for a website or an online ad. However, each digital screen displays color differently, so the color of your design may vary between a desktop, a phone, or a TV, for example.
HEX – In web design, every single color is assigned a HEX code. HEX codes always begin with a pound sign (#) and are followed by a series of six letters or numbers that represent an RGB color. Using HEX codes helps website developers to know the exact color used in your designs.
CYMK – This color mode uses cyan, yellow, magenta, and key (black), and uses the subtractive process, so it is most commonly used in print. Printers layer dots in these four colors over each other to achieve different colors. CYMK color mode can be used in any situation where printing is involved, whether that’s making brochures, t-shirts, or signs.
Pantone/PMS – Pantone colors are patented inks created by Pantone® for consistency in professional printing. The Pantone website says, “In 1963, Pantone revolutionized the printing industry with the colorful Pantone matching system®, an innovative tool allowing for the faithful selection, articulation and reproduction of consistent, accurate color anywhere in the world.” This color mode is the industry standard for professional print, and now most designers use Pantone to ensure color consistency.
Along with color modes, you’ll also work with many different file formats in graphic design. Here’s a list of file types and where they work best.
Vector files – Vector files are images based on mathematical equations. This means they can be infinitely resized without any distortion in their resolution. You can create a design an inch wide and resize it for a billboard, and it will still look amazing. No matter how large or small you make the image, the shapes and details will remain clear. Logos and brand elements should always start as vectors in a software like Adobe Illustrator, Sketch, or Affinity Designer. This ensures your logo and brand can live forever with design integrity. They will never lose quality.
EPS (Encapsulated PostScript) – These are the most common vector files. These are best used for anything that will be professionally printed, because they are universally beloved and retain their quality no matter what size they’re printed at. We use them in brochures and print pieces and when we’re printing swag designs on things like a shirt, mug, or water bottle. We also use them for signage (like that big landmark sign in front of the grocery store—it started as an EPS file) and package design.
SVG (Scalable Vector Graphics) – Like EPS files, SVGs never lose quality no matter how large you scale them. They have gained popularity in recent years because they’re designed for use on the web. The scalability allows web developers to create typefaces, illustrations, and design elements which can scale dynamically with the website based on the size of your browser. This means that the user can have the same experience whether they look at the website on a phone or computer.
Raster files – Raster files are made up of pixels. They have a set number of colors in a grid pattern that make up the image your eyes see. While you can always make them smaller, you can’t make them bigger than the size they were created at. If you increase the size of a raster file or change the shape, you stretch the pixels which makes the image you see pixelated or blurry. Raster images are best for digital or online content like websites, social media, or PowerPoint graphics, but they can also be used in certain print contexts like photographs or small graphics, or for DIY printing on flyers or brochures.
JPG/JPEG (Joint Photographic Experts Group) – These files are lossy (compressed files). The great part of this is that they are one of the smallest raster file formats. The downside is that they lose quality every time you compress them. Compression happens each time you open the file and save it. Compression also happens every time you share an image in an email, PowerPoint, Word doc, etc., so even if you’re not hitting save on the image, you are recompressing the file and losing quality. This is the reason why so many original logo files that were saved as JPGs now look a little blurry or pixelated. At Anna Montgomery & Co., we often rebuild logo files for clients because their original files were saved as JPGs and the quality is now too poor for it to be used. (Click here to more about how we helped Heritage Christian School update their logo files.) JPGs have non-transparent (white) backgrounds. They are really best for photographs that don’t need to be opened and re-saved often. They can be used for website or social media photos or simple DIY printing projects with white backgrounds like flyers, handouts, meeting notes, etc.
PNG (Portable Network Graphics) – These files are lossless (uncompressed files). This means they never lose quality and have transparent backgrounds. The downside is that they tend to have larger file sizes. A lossless image can be shared digitally, will never lose quality like a JPG, and will have zero degradation of the image’s visual quality. PNGs can be used in all digital projects (e.g PowerPoint, social media, website, Google docs, etc.).
TIFF (Tagged Image File Format) – TIFFs were once the gold standard for printing rasters, however, their huge file size makes them bulky, difficult to work with, and impracticable for online use. They are a lossless file, which means, like PNGs, they never compress and lose quality.
WebP – A relatively new file format, Google WebP files help high quality images load faster. The WebP fee reduces the size of the file with only slight loss in quality. This file type can only be used for images shared on the web.
GIF (graphics interchange format) – GIFs have become synonymous with funny memes from our favorite shows, but originally, images were saved as GIFs because they have a small file size. It’s fairly common for old logo files to be saved as GIFs because of this. However, we don’t use them in design anymore because file size isn’t an issue, and GIFs are low quality—they have a very limited color palette and tendency towards low resolution, which makes them a poor choice for images and logos.
PDF (Portable Document Format) – PDFs bring together vector and raster files. They are a universal file format that can be opened by anyone to be printed or shared digitally. It’s not the original design file, but rather a saved version that anyone can open and view regardless of software functionality. The size of the PDF depends on the final use—if you’re just sharing it via email, it will be saved at a small file size whereas if you’re printing, it will be saved at a high file size to ensure proper print quality. PDFs are used for forms, brochures, reports, books, posters, flyers, and digital marketing.
So you’re ready to print. Now what? There are two different printing methods with very different purposes.
Offset printing uses a metal plate to transfer an image to a rubber blanket, then to the paper or other material. It is called offset printing because the ink is not transferred directly to the paper. Offset printing is best for larger quantities, and often gets less expensive the more you print. With this method you’re able to color match more accurately, utilize a wider variety of inks, like Pantone or metallic inks, and get higher quality details. Lastly, you will have more options for what types of surfaces you can print on.
Digital printing applies a design directly to the surface using toner or liquid ink, and is cheaper for printing smaller batches, has lower minimum quantities than offset printing, and a fast turnaround time. This printing method uses CYMK. A CYMK color mode will be less consistent across multiple printers, but will be significantly less expensive than Pantone ink, making it a clear option if you don’t need the highest available quality.
If you find yourself looking to work with a printer, we recommend finding a good printer and always sticking with them rather than price shopping every job. Ultimately, this saves you time and allows for trust and a relationship to develop. Having a good printer = a good printing partner. They are the experts in printing, so you want to lean into their expertise. They can help you make smart paper choices, use your resources well, and budget accordingly.
Now that you’ve covered the more technical side of color, you can feel confident sending files off to your developer or printing t-shirts or banners for an event. And in return, you’ll maintain strong brand identity and a recognizable color scheme throughout all your marketing materials, onscreen or in print.
