Hello out there, fellow designers. If you’re struggling with how to use color in your designs, especially on a website or landing page, this is the exact article you need. It’s sourced directly from a video on The Futur Academy channel that was taught by Greg Gunn, designer and host of the Briefly Creative podcast.
Color is so difficult to use because it’s all about context. To use it to your advantage, you need to have a purpose for each color in your palette. In this article, we’ll walk you through a tutorial on how to apply a color palette.
The problem with color
In the right hands, a color palette will unite the spare elements and direct the viewer's eye, but in the wrong ones, it just might send them into a violent and uncontrollable rage.
During this lesson, we’ll be transforming the landing page on the right (the vibrant, distracting one) into the landing page on the left (the clean, easy-on-the-eyes one that doesn’t make you want to jump off the page immediately.)
We’re starting with the one on the left. If you went to that website and came face to face with the smashing mix of vibrant colors, you’d likely exit within seconds. With a little work, we can transform the page into something of value. More color doesn’t always equal better color.
The 60-30-10 rule
The 60-30-10 rule is like a recipe for how much of each color you should use. It looks like this: the primary color is used 60% of the time, the secondary color(s) are used 30% of the time, and the accent color(s) are used 10% of the time.
Here’s another example with a poster designed by the late great Paul Rand.
He used yellow, green, red, blue, and a couple of neutrals. It’s a lot of color but they all work together because of the 60-30-10 rule. He used 60% white, 25% yellow, 10% red, and 5% blue and black. When you’re able to look at the colors this way, it makes a lot more sense because we can clearly see how Paul Rand used each of the colors and how we can apply that rule ourselves to our landing page.
Making a color ratio
Let's start with our color palette to ensure we have a good ratio of color on our landing page.
You can see at the top we have all of the colors we will use on our website displayed in equal ratios.
We can group colors together to decide what we want our primary, secondary, and accent colors. You can see the colors displayed in the bottom half using the 60-30-10 rule.
White, beige, and black (the neutrals) are grouped together as our primary colors. Blue is the secondary color, making up 30%, and golden yellow, and pink make up our accent colors at 10%.
Make sure the colors work well together
This is another exercise to see how each color will look on the landing page and how it can impact the customer's decisions, where they look, and how they feel.
You can determine which colors work best together by basing it on the background color.
