Pick the right colors for your next project

July 19, 2020

#CSS #WebDesign #UX

Today I want to share with you a very fast way to choose a good color scheme for your next web projects.
We will start with this card below and then we will play with colors !

Model XYZ

$ 380,00

4,5 Stars

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda voluptatem repellat culpa in sint magni ullam quam doloremque ...

Let’s jump to the final result

Model XYZ

$ 380,00

4,5 Stars

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda voluptatem repellat culpa in sint magni ullam quam doloremque ...

Model XYZ

$ 380,00

4,5 Stars

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda voluptatem repellat culpa in sint magni ullam quam doloremque ...

Model XYZ

$ 380,00

4,5 Stars

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda voluptatem repellat culpa in sint magni ullam quam doloremque ...

Model XYZ

$ 380,00

4,5 Stars

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda voluptatem repellat culpa in sint magni ullam quam doloremque ...

They are looking so cool! 😎😎😎 Aren’t they?

Are you wondering where these color scheme are coming from ? Colorsinspo !

ColorsInspo

ColorInspo is an all in one completely free resource that extremely simplify the process of picking colors and generate a perfect palette for you.
I don’t have any kind of partnership with this incredible guys, I’m just a user and I recommend it to you because I’m actually using it on my personal projects.

Now we will go trough the process starting from picking a color scheme and I will share my approach.
Spoiler: Color Contrast is key.

1: Pick a color palette

I will go with this interesting one:

2: You don’t need to use all four colors

I will remove the second one because the other three colors have more contrast.
For the moment we can apply only the light blue and the dark blue.

Model XYZ

$ 380,00

4,5 Stars

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda voluptatem repellat culpa in sint magni ullam quam doloremque ...

It looks pretty much good, but we can do better.

3: Focus on the Call to Action

Our goal is to put users focus on the Buy Now button. In order to highlight it we can use the pinkish color: the eye catching color of our palette.

Model XYZ

$ 380,00

4,5 Stars

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda voluptatem repellat culpa in sint magni ullam quam doloremque ...

4: Text must be always readable

Now we can slice the card in two sections, but we have to pay attention to the text. If we want to use the dark blue as background color for the paragraph , we should also use the white for the text in order to keep it readable.

Model XYZ

$ 380,00

4,5 Stars

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda voluptatem repellat culpa in sint magni ullam quam doloremque ...

Model XYZ

$ 380,00

4,5 Stars

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda voluptatem repellat culpa in sint magni ullam quam doloremque ...

And that’s all! Let me know which one do you prefer and send me your own colored card if you want to add it to my examples above 😁 You can use the form at the end of the page.
Hope you enjoy this post,

Pingu 🐧


Written by Pingu who lives and works in Genoa building useful modern applications.

Something to share ?