skull

Robert Tamayo

R
B
blog
skull

Dev Resources: Colors

Whether I'm working on a website, a game, or digital art, I'm constantly concerned with choosing the right colors. For Robot Ops, I used a triadic color scheme in the initial stages of development. For my website, I needed to find certain colors that were part of the same family. And when creating characters, I need to find the right colors that will match their personality blend well together at the same time.

I'm in no way a natural at choosing colors. I only manage to barely scrape by with the help of some simple tools and by following some basic rules. Here are the things that have helped me choose colors:

1. Start by focusing on the shades


I learned from Brikman's Hello Startup that it's best to ignore color when starting a design. Instead, the focus should be on contrast between different shades of gray. The relevant section of  the book is quoted here, from Chapter 3:

The first tip is to do all of your design work in grayscale first and add color last... At the very end, when everything else is in place, you can add in some color, and even then, only with purpose [Kennedy 2014]... It's easier to experiment with different color schemes when the rest of the design is in place, and it allows you to deliberately choose colors as an accent, set a mood, or bring out a particular theme.

These words above are the words of a marketing/start up/developer guy, not an artist. Though an artist would not consider color the same way, he would at least understand that there is a bit of truth to what Brikman is saying here. One of the most notable aspects of a picture is the contrast between the brighter colors and their shades. Starting from a position of contrast keeps you focused on the goals.

2. If you don't understand color, use fewer colors


I would add from personal experience that monotone or duotone color schemes are the easiest to work with. I enjoy the silhouette effects that can be made from simple color schemes. Limiting myself to 2 colors means that it becomes very difficult to make something that just doesn't work.

3. Use color schemes when using more than 2 colors


There are few types of color schemes that almost always go well together. Red, green, and blue are a triadic color scheme, as are cyan, magenta, and yellow. These colors always seem fine next to each other. Other schemes are analogous, split complimentary, and quadratic.

I refer to Color Hexa when choosing my colors. They provide everything a programmer could hope for when working with color.

4. Mix and match any color, but use a tool to pick the right colors


If you're like me and ignore everything I say, then mix and match colors. But at least use a tool like Color Hexa to help pick the right colors.

For example, if you're drawing a cartoon palm tree next to the ocean, you will choose to use a brown, a green, and a blue for your colors. You can use Color Hexa to find the green you want, then find an adjacent color and adjust its shade or tint to get the blue. Now you have a green and a blue that are related to each other. Next you need a brown, but there is no brown on the page for the green color. So you pick an adjacent color and start browsing through the pages trying to get an orange to look like a brown, while still having navigated there using the green color as your base.

Conclusion


Colors are for the pros. But programmers don't need to be dismayed by choosing color. We just need to find algorithmic ways of choosing colors for our projects.



Comments:
Leave a Comment
Submit