How to Pick The Best Colors For Your Website Design

By Matt Giovanisci •  Updated: 11/18/21 •  3 min read

I’ve done a lot of website teardowns on YouTube. And among all the problems I notice about web design, I think color choice is close to the top.

Picking colors for your brand or website can be hard if you’re not a designer or you don’t have good taste. Both of which are perfectly fine.

Luckily, there’s color science that can help us. And a few tools that’ll literally pick colors for you, like Coolors.co. That’s how I picked these colors below. Just a random generator of nice color palettes.

Choose Only 4 Colors For Your Website

I’m going to make this as easy as possible for you. All you have to do is choose four colors for your entire website design. And two of them are black and white. You can pick a dark black or a light black. And you can pick a cool white or a warm white.

So now, all you have to do is pick a primary brand color and a secondary action color.

The primary color will be the main color you’ll use for the backgrounds and things you want to highlight. Your secondary color will be the action color. This is the color used for buttons on your website.

An Example on Money Lab

Let’s take a look at the podcast page on my website. There are 4 main colors.

Black: #393e42

This is the background color of the whole page. You’ll also notice different shades of black for some of the text. Once you have a black color, you can use different shades for text, background, buttons, etc.

White: #ffffff

This is the standard white color. In this case, it’s used for text to stand out on the black background and buttons. What’s great about black and white colors is you can use them anywhere and everywhere.

Primary: #00ffaa

This is my main brand color. This green color is only used in the logo. You can decide to use your primary color everywhere or just where it makes sense to you. I could use my primary brand color as the background of my navigation bar, but I felt the green stood out better on a black background.

Secondary: #ff3399

This is my action color. This pink color is used for the things that get clicked, like buttons. And since this color really stands out, I also use it for my links. Speaking of which…

What About People Who Are Color Blind?

It’s important to choose contrasting colors for this reason. Everything should be easy to read, even if you were to turn the entire site black and white.

So I suggest using bold colors and standing out from one another. Here’s a great chart to help you pick contrasting colors.

You can also use this free tool from Adobe to help you find the right colors for your website.

Matt Giovanisci

I own three websites across different niches, including pool care, homebrewing, and online business. I design and code all my own sites with the Carbonate WordPress theme. And I have a small team that helps too.

Keep Reading