How to Not Suck at Color - 5 color theory tips every designer should know

Key Concepts

Color harmonies, neutral colors, color overuse/saturation, contrast (value), balance (hue, saturation, value), 60/30/10 rule, consistency.

Tip #1: Color Harmonies

Greg Gunn: Color harmonies are science-backed techniques for pairing colors in visually pleasing ways. They describe the relationship between colors on the color wheel. Examples include monochromatic, complementary, and analogous. Tools like Adobe Illustrator's color guide and Procreate's color harmony tool can assist in selecting harmonies. The process involves choosing a base color and then using a color harmony to find complementary colors. Example: Starting with an orange and using split complementary harmony to find suitable pairings.

Tip #2: Neutral Colors

Greg Gunn: Neutral colors act as supporting colors, receding into the background to allow primary colors to stand out. Common neutral colors include blacks, whites, grays, and browns. They provide visual relief and enhance the impact of bolder colors. They function similarly to negative space in design.

Tip #3: Less is More

Greg Gunn: Overuse and over saturation of colors are common mistakes. Using too many colors, especially if they are all bold and vibrant, can create a chaotic result. Analogy: Like cooking, using only the necessary "spices" (colors) to achieve the desired "flavor" (mood). Recommendation: Start with two colors and two neutrals, adding more as needed.

Tip #4: Contrast

Greg Gunn: Contrast, specifically value contrast (lightness), is crucial. The grayscale appearance of an image determines its success in color. Low contrast makes content difficult to read and can exclude individuals with color blindness. Strong contrast, especially in typography, is essential for accessible design. Rule of thumb: If it works in grayscale, it will work in color. Method: Convert work to grayscale or use Photoshop's proof mode (Command/Control + Y) to check value contrast. Mark Obuchi is credited with the Photoshop tip.

Tip #5: Aim for Balance

Greg Gunn: Color usage should be balanced, like playing an instrument. A range of values, hues, and saturation is desirable. Colors should have a relationship to each other. Not every color needs to be dominant; some should support the main colors. Neutral colors act as the "rhythm section." The 60/30/10 rule is a guideline: 60% primary color, 30% neutral color, 10% accent color. Balance combines harmonious colors, room to breathe (neutral space), and sufficient contrast.

Bonus Tip

Greg Gunn: There are no strict rules for using color, but consistency is key. While color harmonies are best practices, personal preferences are valid. The important thing is to establish a consistent system for color usage so the viewer understands the rules. Example: Using green for highlights and orange for shadows is acceptable if consistently applied.

Synthesis/Conclusion

Greg Gunn: Working with color is challenging but manageable with the right understanding. Key takeaways include the importance of color harmonies, the role of neutral colors, the principle of "less is more," the necessity of contrast, and the pursuit of balance. The concept of balance, encompassing contrast, quantity, and color usage, is paramount. Color is likened to music, where each "note" (color) has its place, and quiet moments (neutral colors) are as important as loud ones (primary colors).