Howdy Reader 🤝

I hope everything is good.

I am pretty sure that every web designer has experienced this annoying thing.

You already have the idea of the page layout you want to create. You also already have a clear idea about the elements you want to add to each section on the layout.

Then you open up your beloved laptop and try to execute the design idea on Figma (or directly on Elementor).

Minutes turn into hours. Your coffee is running out already. Yet you are still struggling with the color selection.

You have tried several color combinations yet nothing matched.

I understand the pain because that kind of thing happened to me multiple times.

Experimenting with colors is part of your job as a web designer.

I have one useful tip that you can try today: use one base color and create some variations of it.

I will give you an example.

On one of my websites, I use one base color of blue with the hex code of #266DF5. I use the base color on the buttons, links, and borders.

Then I created the lighter versions (tints) of it and use them on the section background and text badge.

I also use the color variations to create the gradients.

For the darker versions (shades), I use them on the header and texts.

This is a smart trick that most professional web designers do to work faster because in reality, a website needs only one base color that matches their brand color.

How to create color variations out of a base color

There are some tools that you can use to create color variations out of one base color. My favorite is maketintsandshades.com (no sponsor. Just pure sharing).

You can visit the website of the tool and simply paste the hex color of your base color (or you can use its color picker) and it will automatically make the lighter versions and the darker versions of the color.

And there you go. You can pick the color variations you like and use it on your design.

If you need more color options, you can pick one of the color variations and create other variations out of it.

That’s it and good luck!

Talk soon,

Aliko

Founder of Totheweb (UtilizeWP, WPPagebuilders, Pagebuildertemplates.com)