How to choose the right color scheme for your pop-ups!

You started creating your pop-up, you got to the design screen and now you are stuck.

You don’t know which color to go with.

Don’t worry, even if you are no Van Gough, there are easy ways for you to navigate around color scheme and create an engaging yet converting pop-up.


It’s pretty simple.

You probably already have chosen the design scheme for your company’s website

Next step is to match the pop-up to your company while making it attractive to the visitors’ eyes.

We will look into which color scheme for different types of pop-ups you can create.

So let’s get started!

There are many tools out there that will help you create a color scheme based on already present colors on your website.

These tools are called ‘palette generators’.

For example, you can use Adobe Color to see which colors are optimal for great design on your website

Adobe Color gives you various options to choose a color harmony in their platform.

Let’s imagine that your website is using color indigo.

You are not sure what added colors would best go with it.

You are looking for something moderate, something that will blend in with the already existing indigo color on your website.

In that case you can go with a monochromatic approach and pick other shades of indigo so everything blends well.

On the other hand, if you want to see what other colors would stand out with indigo, use the complimentary colors.

This will give you additional colors that you can use to support your primary indigo colors.

Recommendations for modal pop-ups

Colors for modal or center of the screen smart pop-up should be using the same colors as used in the background.

The objective is make the pop-up appear as a part of the journey, not something like a banner ad which has nothing to do with your website.

Try to use a similar color scheme for these so we can engage the visitors in a polite way. We have seen that pop-ups which use a very different colors scheme don’t convert very well.

Remember the KISS formula even in branding. Keep it simple stupid!

Create a pop-up which is consistent with the look and feel of your website yet is eye catching!

Recommendations for floating bars

For floating bars, we highly recommend using darker or more prominent colors.

Floating bars don’t take a huge space but they have to stand out!

Use either very dark or very bright colors so they can attract visitors’ eyes.

Remember, keep your pop-ups simple and non-intrusive.

What next?

Go to Adobe Color and start designing your pop-ups.

About the author:

Timur Ali

Timur Ali

I have been working in the digital marketing space for almost 10 years. It's my passion to help great brands get their message across to their clients using the right words and channels.


You may also like:

Send Us A Message