Introduction
Welcome everyone to the first in a series of blog posts called Designer’s Insight! I’m Andrew Warren, and I’m here to take you on a journey in the world of graphic design and web design. Each week, we will highlight a different tip, industry standard, or service highlight.
This week, we are going to jump right into Episode 1. In the design industry, we
are oversaturated by design that shows a misunderstanding of what I will call “The Color Rule.” I come to this with a lot of compassion and willingness to help. But first, let’s define and explain “The Color Rule.”
The Color Rule
In the majority of design projects, “The Color Rule” provides a maximum-color-count parameter, a color-mixing parameter, and a readability parameter. We will unpack each of these. There is nothing wrong with misunderstanding any one of these in your design, as this is a process of mutual learning and discovery, some of which I have learned rather recently.
In visual design, specifically for interior decorating, there’s a rule that will factor in here—the 60-30-10 Rule. What is that…that extra rule within a rule? This rule helps create a color palette for a space. First, it dictates a three-color guide, 60% being one main color, providing the eye with a clear communication of what the primary décor theme is. 30% is dedicated to a secondary, texture color, different enough from the first color to set them apart but supporting it simultaneously. The last 10% is a tertiary accent color, focused on drawing attention to artwork or furniture accents.
How does this apply to graphic and web design? Let’s unpack. In most brands and designs, there are at least two colors. This is not required but is most common. So, let’s say we are at two colors. In this case, we are going to do 60/40, but with less enforcement on the exact percentage of each. 60/40 is a good rule to predetermine what your vision is. So, with Rendr Creativ, we have a primary mid-deep blue with a secondary common teal. With the blue guiding the eye, we incorporate 40% or less of the teal. Occasionally, we mix in our tertiary color for signature splash of extra flair—orange-yellow. See our examples below.
With these examples in mind, let’s skip over to our color-mixing parament for a moment. Let’s say, for example, that I took the teal and replaced it with brown. Suddenly loses the taste, right? Imagine then that I took the orange-yellow and replaced it with purple? Now the whole thing is out of whack, as you can see here.
Ultimately, these two parameters tie together. At the end of this post, there will be resources to expound on both ideas. Here’s how we can sum them up together, while still expressing their separation. In design, two to three colors should be used. If you can’t think of a third color, a shade of gray may work just fine, depending on the overall design (using your best judgement). Those two to three colors should be symbiotic, in that they do not have too much separation from the main goal or too much similarity and relation to prevent distinction.
Keeping up? We only have one more parameter to cover. Readability—at it’s core, it explains how to make text and design legible on your foundational or background color. There is a really handy tool you can use, rather than my explanation, to find the readability of your text or color palette. Check out the links at the bottom for that tool! The tool follows the Web Content Accessibility Guidelines (WCAG), showing you contrast ratios with ratings for colors on top of other colors. This can dramatically improve your selection of brand colors before you get too deep.
Conclusion
In the end, your design is your design. But in turn, your client or your business may suffer at the hands of a mish-mash mismatch for a color palette. And that is never the goal. Our job as designers is to bring continuity, simplicity, and order to our charged creations.
Next week, we will unpack font selection, mixing, and their types. You can have all the colors you want in your brand, but you will also need a font! Tune in next Monday for another Designer’s Insight!
Relevant Links
Color Contrast Checker: https://coolors.co/contrast-checker/a4b5c7-acc8e5 (you’ll need the color code—HEX, RGB, CMYK, etc.—to be 100% accurate to your selections)
DiggiNet Content Marketing Blog Post (Jan 22, 2024): https://www.digginet.com/content-marketing/color-psychology-in-branding-and-marketing/
Fotor Blog – Color Theory in Graphic Design: https://www.fotor.com/blog/color-theory-in-graphic-design/