Blue and green glowing hexagon wall
All articles
Mar 4, 2015 | Updated Jun 11, 2024

Visual design tips for non-designers: using color

In an effort to do my part and help increase the world’s number of well-designed presentations, I’m starting a series called “Design Tips For Non-Designers.” These tips aren’t intended to make designers out of non-designers. They are simply to help folks who don’t have design training become better at visual communications. This is for all the project managers, researchers, and marketing folks out there who want to improve their deliverables. You know who you are.
Peter Stern, Head of Design & Partner at Blink.

By

Peter Stern

PDF

The importance of knowing how to use color

One of the most common issues I see is color usage. I have a theory that many people are intimidated or overwhelmed by choosing colors, particularly strong colors. This leads to the proliferation of pale, pastel, and generally watered-down color palettes.

The solution is simpler than you may think

Choosing great colors doesn’t require extensive training. It requires being observant, using a few simple tools, and knowing where to look. We’re not talking about color theory or the psychology of color here … we’re just talking about making presentations that look great.

The whole process can be broken down into a few simple steps:

  • Finding great color
  • Using tools to capture color values
  • Understanding how to use custom colors in your applications

A quick word about color formats: Colors are referenced in a variety of ways for different purposes. You have probably heard the terms CMYK, RGB, Pantone, and Hex colors. These are simply different ways of codifying or quantifying colors. Some are used in printing or silk-screening, while others are used specifically for computer screens. They are all ways of describing colors, and for the most part, they’re interchangeable.

For example, this color blue can be described in multiple ways:

  • The Hex color code, which is used in web design and many applications, such as Microsoft Office, is #4A8CAE
  • The RGB (Red, Green, Blue) value is R74 G140 B174
  • The CMYK (Cyan, Magenta, Yellow, Black) value is C57.5% M19.5% Y0% K31.8%

The important point is that these values are all ways of describing the same color. It’s not dissimilar to describing a color in different languages — such as saying blue, azul, or bleu.

Most applications, such as Microsoft PowerPoint and Apple Keynote, use either RGB or Hex color values. I personally think the Hex value is the easiest to use simply because it’s easier to copy and paste one value.

Finding great color

The first step to designing more vibrant presentations and knowing how to pick brand colors that impact viewers is to find the colors you want to use. Luckily, the world is a colorful place. The perfect color combinations for your needs are out there, and all you have to do is look for them.

Great color combinations are all around you

I often take pictures with my phone specifically to capture interesting colors or color combinations. Here is an obvious example: My wife dragged me reluctantly into her favorite yarn store and, to my surprise, eventually had to drag me out. This is one of several dozen pictures I took specifically to use in my design work.

Once you find colors you like, there are many apps and websites that will analyze your photos and distill them into a palette.

Or, you can use one of the color picker tools listed below to pick out the colors you want.

There are endless resources online for great palettes

Pinterest is a great place to start when designing a color palette. Creators on this platform arrange colors in creative ways based on combinations found in nature, or they develop palettes of complementary colors. Two ways you can find these palettes include:

  • Using the search bar: You can be as specific or general as you want in Pinterest's search bar, and ideas for palettes will generate based on your search. For example, you may search for color palettes directly and then refine your query. You can also click on ideas you like, which will populate related palettes.
  • Referencing boards: Many users collect images of palettes in Pinterest boards. You can scroll through a board, which often contains pins with similar themes, to find colors that the creator liked.

There are also quite a few sites dedicated to creating and sharing palettes

There are also quite a few sites dedicated to creating and sharing palettes

Finding the right colors is so popular that people have created whole sites dedicated to color palettes:

  • Adobe Color: This tool, available on the web and mobile, lets you add color combinations to your Adobe Express projects. It also features an explore page where you can find palettes, a contrast checker that lets you design accessible themes, and themes that account for color blindness.
  • Colrd: This site has various color palettes designed by users. It also features gradients, patterns, and color palettes based on images.
  • COLOURlovers: The COLOURlovers site features over 4,890,195 user-created color palettes. This option is unique in that it lets users comment on, “favorite,” and “love” palettes, and it tracks how many views each palette has.
  • Color-hex: From palettes depicting Facebook and Discord branding colors to anime skin tones, this site features a range of fun color combinations.

I personally use Adobe Color because it works seamlessly with all the Adobe products that I use and there is a big community of talented folks creating and sharing palettes. Here is an example from my “favorite” palettes. Notice there aren’t a lot of soft or subtle colors. Perhaps if I designed wedding dresses, I would choose softer colors … but in my world of visual communications and user interface design, bolder is often better. People respond to it, and bold colors create greater contrast for text overlays, making it easier to read.

What to do when working with brand colors

I think it goes without saying, but I’ll mention it anyway: If you are working within a brand system (and you likely are) someone has already created a color palette. It’s often broken into primary and secondary colors and is usually part of a larger set of brand guidelines. Find the page that defines the colors, then print it out and keep it handy.

Or, maybe you are the one in charge of creating the color palette. In that case, knowing how to choose brand colors is essential. The first step is to figure out what the brand represents and use that to inspire the color palette you use. You may want to develop a mood board that lets you express specific attributes and feelings. From there, choose the colors that best capture the essence of the product or company. The result? A beautiful color palette that viewers associate with the brand.

Tools for capturing color values

Once you develop your palette, you'll want to apply the colors to your presentation. Many of the palettes on Pinterest and other online sites will provide the corresponding color values. However, these may be incorrect in some cases, or you may want to apply colors from pictures you took yourself or palettes without the color values listed. In these instances, it's vital to find the right value of the color you want to use.

The number one indispensable tool you'll need is a color picker app or utility

When you want to capture color values accurately, it is simply a matter of having the ability to click on any pixel on your screen and capture the exact color value. Believe it or not, there are still professional web developers who “eyeball” colors rather than use a tool.

This doesn’t work. Trust me on this — get a tool.

There are a lot of options available, from utilities that are already installed with your operating system and browser plugins, to iPhone and Android apps. Microsoft Office apps have a color picker/eyedropper tool built in, but it can be cumbersome to use.

Here are a few options to help you get started. Don’t be shy to try a few — they’re all either free or inexpensive.

Browser based

Mac

Windows

  • Instant Eyedropper: When you click on a pixel on the screen, this tool identifies the HTML color code and automatically pastes it to your clipboard.
  • Quick HTML Color Picker: This Windows color picker tool lets you preview the color you select and get the corresponding HTML and RGB formats.
  • Just Color Picker: If you want HTML, Delphi, Hex, RGB, CMYK, HSL, and HSB/HSV color formats, this is the tool for you.
  • Color Cop: For this tool, you drag an eyedropper control to the color you want and release the mouse. It will automatically copy the hex color code to your clipboard.

Understanding how to use colors in your applications

Most applications have color pickers that work pretty similarly. They basically allow you to:

  • Pick from a tired, old, predefined palette that everyone else is using.
  • Pick colors from a spectrum or wheel of some sort.
  • Change or adjust colors by manipulating knobs or levers.
  • And, most importantly, allow you to plug in a specific numerical value.

Just use your color selector (eyedropper) tool to choose the color you want, copy the Hex number, and paste it into your application color-chooser. Boom! … done.

Monochromatic palettes

Here’s a useful technique I use when I want to create a range of values for a particular hue. This is useful when you need something like this:

or even when you just want a secondary color like this:

First – color all the objects or text the same color.

Next – select one of the objects, click “change color,” and find the view in the color editor that looks something like this:

One final tip about saving and managing color palettes

There are now many ways to save your collection of palettes. You can save them within your applications, and there are tools and websites dedicated to color palette management. These are all great options, but they can be difficult to set up and nearly impossible to share.

One simple method is to create a PowerPoint deck with your color swatch collection. I have a deck called “PowerPoint Goodies” where I collect color swatches, gradient swatches, and my favorite graphic elements, such as icons and arrows.

When I start a new presentation, I also open my goodies file and simply copy and paste the pieces and colors that I need. Usually, I’ll use the format painter feature to copy the fill and stroke from my swatches. Side note: If you don’t utilize the format painter feature, you should. It’s the single best feature in Office for creating presentations quickly.

I’m not giving out my goodies file because it’s an important part of my secret sauce, but here is an example to get you moving in the right direction:

That’s it. I expect great-looking presentations from here on out. Don’t be afraid to be bold.

One final tip about saving and managing color palettes