#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 !

Let’s jump to the final result

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.

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.

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.

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 🐧