May 11, 2018 The World of Colors and How to Conquer It

The most basic thing for new members at Topcoder, to learn and advance with, is color. Surprisingly many of the top designers on Topcoder have no basic skills with color at all when they join. If you have chance to see iamtong’s work, you will ask yourself how does he manage to pick that color and not this one, where did that decision come from, what is his secret to selecting and combining all those colors, and these questions can go on and on as you wonder. Let’s talk about color!

Understanding Color Theory

The first thing you need to know about color is the color itself. Based on the Oxford Dictionary of English, color (or colour) means the property possessed by an object of producing different sensations on the eye as a result of the way it reflects or emits light. But what is color in design?
In order to keep this article short (and since color theory is a fascinating one to learn), you can find how Adobe and Bohemian explain their version of color here if you’re Photoshop fan, here if you’re Illustrator fan, and here if you’re Sketch fan. Take your time to understand the topic about RGB and CMYK color space, color properties like hue, saturation and brightness before we jump to the common problems about color.

Common Problems

Below are the common problems that new members will face during their first time competing in a design challenge.

Problem 1: How to Select a Color

Let’s start with this question: how many colors exist in this world? If you guess 256 or even one million, the answer still does not come close enough to represent the range of color that exists. That’s why one source cited that the total amount of colors is infinity. But only numerous amount of color can be perceived by our eyes. So if color is infinite, then there is a possibility to select colors that are also the same, isn’t it? The amount of choices of color is also infinite. What if a client gives you their single logo color and allow you to select any color that you see suitable to their branding, say Topcoder color #29abe2. How can you select another color to work with? Copying another existing brand which use the same color? Think again.
Solution:
Try color rules (alias color scheme, harmony rules). There are few basic rules that you can use to select and combine color. Here is the summary (although you can read the longer version here, here, and here):
1. Complementary colors: color that are opposite each other on the color wheel.
2. Split complementary colors: two colors located beside the complementary color.
3. Analogous colors: a color scheme located next to each other on the color wheel.
4. Triadic colors: pairs of color that creating a equilateral triangle on the color wheel.
5. Tetradic colors: pairs of color that creating a rectangle on the color wheel.
6. Monochrome colors: colors with the tints, tones, and shades of a single hue.
7. Shade colors: colors that vary by adding black or white.

This basic feature usually exists in all design applications. If you like to play around, try color (former kuler) to see the color rules applied in real life.

Problem 2: Brightness and Contrast

Try to create this on your favorite design application: yellow text #FFFF00 on white background #FFFFFF, blue text #0000FF on black background, what did you get? Well, this is a common problem when you don’t pay attention to the brightness and contrast. You end up creating a design where it’s hard to read the text because you’re selecting the wrong color for text.

Solution:
Pay attention to color contrast levels and carefully combine dark or light colors so both of them don’t blend into one. You can use a contrast checker to help you decide if you have any doubts. Have a look at the Carbon Design System from IBM. It’s so simple, clean and modern yet the color combination is appealing to the eye.

Problem 3: Primary Color Overdose

Another color problem is using primary colors in too many elements. It’s easy to detect this problem. Usually you will get feedback from reviewer that stated design is too blue, or red. Behold, you’re not alone. Even the pros can fall in the same trap.
Solution:
Keep your colors simple and have this principle in mind—use primary colors sparingly. By doing this, your design will be balance without overdosing the color.

Problem 4: Unavailable Color Branding

As mentioned previously, the best way to convey a client’s identity is by using their branding and colors, if it exists. The problem is, not all clients that run their design challenges on Topcoder provide it. In that case, this will be a hurdle if you’re usually dependent on these guides.
Solution:
Ask in the forum which colors the client prefers. If no guide is available, then it is up to you to decide. However, the challenge should include some indication about what the client is looking for with using terms like “clean”, “modern”, or “easy to use”. These things start to suggest certain UI and layouts, but they can also be communicated through color. The quickest method to get started is to choose a single color and then use the tools mentioned above to “build” your color palette.

Problem 5: Dull and Off Color

Have you ever wondered how Apple and Google keep their designs looking fresh and professional in certain ways and with a new color introduced? On the contrary, you may be trapped to select a dull and off color in your design, and be forced to use the color over and over again in your designs.
Solution:
Get out of your comfort zone by investing your time on looking at renown design language and their application. Have your own exploration with that color and save it in your color library so you can use it in your project.

Useful Tips

Here are some useful tips which come handy needed.

Tips 1: Research

Before starting your design, it is better to spend your time to find color that works. Sometimes client provide their own color that you can use. It’s good if they also provide the example on how to use it. Take your time to adapt to their color scheme and make a mental reminder on which color goes to each element, eg. light gray for background, blue for button, green for notification, etc.

Tips 2: Create Your Color Library

Every designer has their favorite colors, not one but many of them. Organizing the colors in a swatch library will save you time and effort so you can keep reusing them later on in your next project.

Tips 3: Be Inspired

Never stop inspiring yourself with the world full of colors. Nature provides for you its beauty of color with: sunset, sunrise, fall, coffee, blue sky, flowers, rainbow, you name it. Go outside, take a snapshot of mesmerising color and read their HEX code using this app. Then you can use it later in your design.

Tips 4: Practice Make Perfect

Keep practicing to harmonize color in your design. As May is 2018 Topcoder Design Month, take a peek at the challenge list, jump in on all challenges if you can so you can practice on selecting and combining color. Good luck!