Whether you’re color coding an email to your students, or adding some eye-catching elements to your Canvas page, it’s important to be intentional with your color choices. Good use of color can pull together the visual side of your work, but a bad use of color could draw away any viewer from what you’re trying to communicate.
The good thing is, you don’t have to have an arts degree to be great at using color. In this blog post, I’ll be sharing a few tricks and tools you can easily apply to your work.
Create a palette
Let’s go back a bit and pretend we’re back in grade school, picking out a recess activity. Your two options at the moment are a Paint by Numbers project, and a coloring book – comparing the two, which feels more intimidating? The coloring book, right? The limitless options for color can feel like a drag, and keep us from starting on what’s most important. With the Paint by Numbers project, we can get started right away knowing everything is laid out for us.
Now, we hardly ever have a project that lays out all the colors we must use. This doesn’t mean we can’t create those colors for ourselves. Before you get started on any piece of work, you can simplify the amount of time you spend experimenting on multiple colors by creating your own “Paint the Numbers” with a palette.
There’s not really any rules for creating your own palette, but a good range to start in is somewhere between 4-6 colors. Usually, having one color that’s dark enough to serve as a text color, and one color that’s light enough to be a background color or a text color on a dark background is important to include. The other 2-4 colors all depend on what you’re creating for.
For example, here’s a quick palette I made, what I determined each color to be, and how it could be applied:
Creating successful palettes on the first try is a skill that takes time to perfect, but the good news is, you don’t have to rely on your own discretion to always create perfect palettes, which brings me to my second tip.
Use a palette generator tool
The internet is full of great resources for help with colors, including palette generators and communities where you can pull a palette that fits just what you need. My personal favoite is a tool called Coolors. Coolors is completely free to use. The site not only includes a wide variety of user-generated palettes for you to use, but allows you to plug in your own color and create random palettes until you get the one you want. Check out this tutorial to see what you can do with Coolors:
If you’re a fan of less color options, Color Hunt offers a similar service with just four colors to choose from.
Drop in colors from an image
Like the tutorial for Coolors mentioned in the features, dropping colors from an image you like can also be a great way to produce a palette. You can use automated tools like Coolors to help you create an image-based palette, or create your own with an eyedropper tool in Adobe and Microsoft software. It’s easy – even in Microsoft Word, you can add in an image into your document, click the text color option in bar on the top left, click “more colors”, and choose the eyedropper tool to create your own palette.
For this example, I browsed the popular stock photo site, Pexels for an image to drag and drop colors from. Keeping in mind my text and background color rules, I stuck to a simple four color palette for this example. Again, this example isn’t perfect, but it shows how good photography can be used within your work and serve as a starting point for your color palette.
You can browse stock photo sites like Pexels and Unsplash for imagery to use, or take your own photos and save them to your desktop. Good inspiration is anywhere – some perfect examples include brightly colored buildings, floral arrangements, public murals, and animals at the zoo, just to name a few. The options are limitless!
Be wary of poor color combinations
My last tip for this post is to give a word of warning about poor color combinations. I encourage you to experiment with color, but always keep in mind readability and user experience when using a palette. Your viewer should always be able to read your text, discern all elements within a project, and your project should be visually balanced in order to not overwhelm or underwhelm your viewer. Not all palettes are perfect, so be sure to test them before applying them all over your work, only to realize the combinations don’t work and you have to restart from the beginning.
In this example, I’m going to show you a bad palette that could be poorly applied, and how I fixed it for my example.
Hopefully, you’d never see an example like this out in the wild, but these are some mistakes that can be easily avoided with careful detail and attention. A few things to note about this one:
- In the header, the color for “Spring is Here!” doesn’t provide enough contrast from the yellow, and would be difficult for anyone to read. You should always provide enough contrast between your font color and background color to make it easily readable.
- The text overlaid on top of the flower picture is difficult to read – not only because of the light font weight, but both the green and pink are difficult to read. Keeping areas of text the same font color is important to group them together. Putting text on top of an image is also risky, as it’s often unreadable in images such as this with so much going on within it.
- In the final section with the two green colors, the text color is too similar to the background color. You rarely ever need two colors to be almost identical within a palette, and you should never combine them like this, as it makes it extremely difficult to read.
Now, here’s the new and improved version of this palette and layout. It’s a very simple example, but I stripped out some of the colors and replaced them with new options that provided more contrast for text and headers. I color-dropped the two new greens from the tulip image I got from Pexels. This way, the colors in my design matched my images, and were also more readable. I grabbed a new tulip image to show you can overlay text, but try to choose images with white space you can easily provide contrast against. While you may not use the accent pink and yellow too much, there are two small examples of how you can provide visual contrast in something as simple as a web page like this. For example, I made my button pink to bring the viewer’s eye to that area. I used the yellow as a highlight as well, for important text I wanted to highlight or emphasize.
While this list doesn’t cover all the bases for best using color in your design work, this is a great start if you’re color-wary, or want some easy tips to make your work stand out more. Don’t be afraid to experiment and try unique combinations! And as always, if you need some help on a project, seeking color-related advice or not, feel free to reach out to IDS for help or advice.
What questions do you have about using color in your work? What topics in design are you curious about and want to learn more from? Feel free to comment below with any questions you have – they might make it into one of the next IDS blog posts!