In my opinion, the colors that you choose for your design, whether it’s a web page, logo, or product label, will determine the professional-looking outcome of it.
That’s why if you read this blog post till the end, you will discover exactly how to pick the color pallet for your design so that you never get frustrated with colors ever again.
Introducing to you my 60-30-10 color pallet framework that will make designing a hundred times easier.
It’s been a few years since I started creating websites for myself and I’ve always enjoyed every part of it but the design. Like oh man, the design part always got on my nerves because I don’t have a super good eye for it.
Then one afternoon while I was scrolling YouTube for design-related videos, I came across a guy called Jesse Showalter who was running a channel specifically aimed toward web design. And the video he posted was about the color pallet rule named “60-30-10”. At first I was pretty skeptical by its name but I decided to see what was going on, I’m glad I did because that one video changed the way I design my web pages forever.
Ever since, I’ve bee using that same framework for every single design and I’ve never had problems with designing a web page ever again. Now, I must admit that to this day, I’m not the best at coming up with great designs on my own,
But I do consider myself “good” enough to the point where the designs don’t look like some 2001 website with 70 different colors which causes you to get color-blind.
So here are steps I follow when choosing the colors:
- Where to pick the colors?
- Choosing the main design color (60)
- Choosing the color for sections & blocks (30)
- Choosing the color for buttons (10)
Where to pick the colors?
I know there are dozens of different places where you can pick colors, but my favorite website got to be https://mycolor.space Once you’ve picked a specific color, it will generate dozens of different templates that you can choose from.
Choosing the main design color (60%)
We first start by picking the main color for our design which we will take up 60% of our design (Hence its called 60). This is mainly used for the background, which is usually a whiteish or grayish color, but you can choose any you’d like.
I personally always go for white because it matches almost any other color you throw into the design plus it always looks good.
Choosing the color for sections & blocks (30%)
The second color we pick will be used for 30% of our design. This means that it will be mainly used for sections and specific blocks.
PS- If your main color is greyish, then the color for sections & blocks could be a full white color.
Choosing the color for buttons (10%)
Now last but not least, we will pick the color for our buttons, aka call to action. This color should always stand out from the rest of the page.
