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.

The four quadrants use each of the primary colors and blue, which is the secondary color.

Next, we can put type in each quadrant because when we are using typography, we need to think about additional things like legibility, links, and call-to-action placements. You don’t want to make the links and the buttons a primary color; these are great for accent colors.

Additionally, as you can see in the upper right of the photo above, you want to make sure that any buttons don’t get washed out by the background color. Yellow against the beige background is a little fuzzy; it’s best to stick with pink in this scenario.

With the finished color exercise, you can see that Greg has tried to limit colors fighting against each other for the viewer’s attention. Added design elements are mindfully used as decoration without overpowering the rest of the colors. The color ratio is at work in each quadrant.

Putting the color ratios into use

Now that we have correctly created our color ratios, we can use them as guides to transform the original landing page.

With the ratio we created on the left, we can clearly see what our landing page will look like with a new and improved background, text, and accent colors.

In the above image, we see pink being used as the background color, but now we know that it’s supposed to be an accent color. So, we can swap it for white. The buttons as calls to action can be changed to pink, and the text in some areas can be changed to white to have better contrast.

Finally, Greg changed the color of the illustrations to limit the amount of accent color being used. The illustrations are great, but we don’t want them competing for the viewer’s attention when it’s supposed to travel to other places on the page.

Now, we have a good balance of color and a clear visual hierarchy. We did a pretty good job transforming the landing page into something people won’t want to run away from.

Remember, having a purpose for the colors you choose makes a big difference. Stick the the 60-30-10 rule, and you’ll be better off. If you develop your own color ratio and set of rules for how to use them, then your palette will work just about anywhere. Give it a try and start creating eye-pleasing sites for yourself.

If you liked this tutorial, you might also want to watch the video. Greg takes you through these exact steps, but you’ll get to hear his voice and see his face (just an added bonus).

Have fun exploring color palettes and putting them to use. Don’t let color scare you off; once you understand its purpose, you’ll be able to master its placement in no time.

‍

‍

This article is brought to you by our Accelerator program. Accelerator is an educational and coaching program tailored for creative entrepreneurs. It offers detailed tutorials, regular coaching sessions, and a curriculum that guides you through launching and growing your creative business.

Accelerator might be just what you need, but we understand everyone's journey is unique. We recommend taking our Find Your Fit quiz to help pinpoint the right Futur™ offering based on your specific goals and stage in your career. Click here to take the quiz.

‍