We are donating 100% of June’s Dribbble shop proceeds to the Equal Justice Initiative, a nonprofit challenging racial and economic injustice.

Eaf6de7aeff3276a8f926115caf1f253

Art by Dmitry Stolz

A practical guide to working with color in digital illustration

If you have ever created an illustration, chances are you had to choose some colors. It’s also likely that you’ve had a mental debate on choosing one color over the other. Should I go with orchid purple, or will my illustration look better with blood red? Maybe sky blue will do the trick? The possibilities are endless!

Once you understand the fundamentals, you may find working with colors an enjoyable process.

There are also times when you’ve chosen a color scheme and have already applied the colors to your illustration. But for some reason, the colors are off, and you couldn’t pin down the reason.

While colors can be tricky and time-consuming to get right, once you understand the fundamentals, you may find working with colors an enjoyable process. Below are some key principles that have helped me improve at working with color.

  1. Dream Home Feature girl pool summer property plants home flat simple nature design texture illustration
  2. Impact of Animation story contrast handbook uiux impact planning illustration motion animation
  3. Nature Explorers science monstera palms jungle vector summer team nature girl product flat design character illustration


Think about the context of the illustration

While it’s important to consider how colors contribute to the overall visual appeal of an illustration, being deliberate about how colors can effectively communicate a message is equally important.

For example, if you’re asked to create an illustration for an editorial piece on the benefits of smiling, you wouldn’t want to pepper your illustration with blacks and grays. Instead, you’d go for happier colors like yellow or orange. Similarly, if you’re illustrating an enchanted forest at night, using colors like purple and blue, instead of the usual green, conveys the magical aspect of the forest more convincingly.

Choosing colors may seem intuitive, but when dealing with unfamiliar topics, it’s safer to do some research.

Choosing colors for an illustration may seem intuitive, but when you’re dealing with topics that you’re unfamiliar with, it’s safer to do some research. You can do this by scouring the internet and collecting images that you can use as references.

To help me make better color decisions, I also like to ask myself the following questions:

  • Where is the illustration taking place? Is it on land or underwater? Is it in a bustling city or a quiet countryside?
  • At what point in time is the illustration taking place? During the day or night? During the hip 60s or 10 years into the future?
  • How does the setting of the illustration look like in the real world?
  • Who are the main subjects of the illustration? If they’re people, what are their personalities? If they’re animals or inanimate objects, how would you describe them?
  • What is the main emotion that I want to convey with my illustration?
Summer Holiday jungle foliage summertime surfing vacation beach summer editorial typography design flat drawing graphic character vector texture illustration

Summer Holiday

by MUTI

We’re all going on a summer holiday… Illustration for We Love Summer - Plettenberg Bay

View on Dribbble

Start with a limited color palette

When you’re just starting out, stick to a limited color palette first, and then explore more complex combinations as you go along.

If you’re a beginner, working with 3 to 4 colors is recommended because it will help you see the relationships between colors more easily. With a limited color palette, you can quickly tell whether the colors work well or if they clash and make your eyes bleed. And when the latter happens, you’d know which colors need to be changed.

Working with 3 to 4 colors is recommended because it'll help you see the relationships between colors more easily.

Once you’ve gotten the hang of working with 3 to 4 colors, you can take it a step further by experimenting with more complex color combinations. You can do this in two ways:

The first way is to increase the number of colors you’re working with. For example, instead of using 3 to 4 colors, you can challenge yourself by working with 8 to 10 colors. The second way is to explore unusual color combinations, like neon red, olive green, and powder blue. However, bear in mind that the more colors you add, the more difficult it is to achieve color harmony.

CAMP mushroom outdoors fire bear snake eagle hawk wolf camping camp

CAMP

by Doublenaut

18" x 18" two colour screen print: http://doublenaut.com/shop/camp

View on Dribbble

Contrast is key

Your chosen colors may be appropriate for the given context. Your illustration may work well with either a limited or more colorful palette, but when your colors don’t have the right amount of contrast, your audience will not know where or how to look at your illustration. Worse, your audiences’ eyeballs could get strained, especially if your chosen colors all fight for attention.

To check if your illustration has the right amount of contrast, add a black-and-white adjustment layer on your illustration in Photoshop. By converting the illustration to grayscale, you are focusing on adjusting the brightness and darkness or the value of your colors.

To check if your illustration has enough contrast, add a black-and-white adjustment layer on your illustration in Photoshop.

Once your illustration is converted into grayscale, look at the elements in your illustration and see if you can distinguish one part from the other. You’ll know when you need to fix the contrast of your illustration when some elements blend in with the background.

There are three quick fixes for areas blending in with the background:

  • Simplifying the color palette
  • Increasing or decreasing the saturation
  • Bumping the color values up and down

If you’re wondering which of these three quick fixes you should use, I’d say it depends on your illustration and your chosen colors. While there’s no one-size-fits all formula for this, it helps to play around with the colors and see what works.

The Science of Analysis Paralysis productivity peaceful remotework remote teamwork wfh doist todoist illustration

The Science of Analysis Paralysis

by Yin Weihung for Doist

How overthinking kills your productivity and what you can do about it Visit our pages to check out more details:

View on Dribbble

Don’t be afraid to explore and experiment!

The most effective way to improve how you work with color is to keep exploring and experimenting. Work with a limited color palette and then increase the complexity by using 8 to 10 colors. Mix and match weird color combinations, and figure out what works and what doesn’t. While you’re at it, make sure your colors align with the given context of your illustration. Adjust contrast when necessary so you don’t strain anyone’s eyes. Rinse and repeat. Your curiosity will take you far.

Color Composition Testing Temp[late download template color

Color Composition Testing Temp[late

by Justin Mezzell

Hey! If you're looking to pressure test some colors and the relationship they have with one another, I threw together a little AI file that you can download and see how they're all working together. Hope it's helpful! You can download the attachment to...

View on Dribbble

Frances ToFrances To is a Product Designer at First Circle, a FinTech startup ($28.5M Post-Series A), by day. By night, she’s a freelance illustrator who loves to blog. You can view her illustrations on Instagram or read her blog on Medium.


Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.


Icon shot x light