Changing Colors

We are all psychologically affected by colors, and they hold power to influence your audience’s feelings and behaviors directly. Therefore, colors play a powerful role in the general experience you’re crafting for people who visit your website.

Choosing the colors while keeping consistency from one page to the other is not easy. This is especially true if you are not a designer (as most of us). It’s easy to mess up with colors and end up with too many hues or color variations that make certain areas of your website (text, buttons, section) hardly visible for your visitors.

When it comes to building a website, besides the good-looking aspect, you must make sure that the colors make your content visible, readable and drive you closer to achieving your goals (e.g., getting a booking, an email, a download, or a purchase). No matter the case, colors matter.

Have no worries. We have built the right controls to easily customize your website’s colors and apply them to all areas of your website with a few clicks.

Before diving into the technical bits, I recommend reading this article that details the importance of colors in conveying your personality and creating an emotional connection with your audience. And if you need help deciding the right colors for your website, this article sheds some light on the human perception of colors and how to find the palette that suits you.

Choosing the right color palette

The first time you set your website’s color scheme, simply having a set of color pickers is not ideal since it usually means that you have unlimited possibilities and just as many opportunities to go wrong. And most of the time, you get frozen by all the decisions you have to make.

That’s why we built the Style Manager, an intuitive system that lets you choose between various color palettes and customize them with a few clicks. The system also offers a wide variety of pre-built color options to fit almost any taste.

To access the Style Manager, you need to go to your WordPress Dashboard (admin area) → AppearanceCustomizeStyle ManagerColors. Once you are there, you will find three areas:

  • Customize Color Usage – here’s the place where you will find all the pre-built color palettes. You can set the brand colors here and you have more options for colors here, like choosing the pallete basis offset, or choosing the coloration level. You can also activate the activates dark or light mode automatically, according to the visitor’s system-wide setting. Here you can also colorize the elements of your site one by one. Plenty of options to play with in order to get the best color scheme for your site.
  • Explore Colors – color presets to help you lay the foundations of the color system and make it easy to get started.
  • Extract from image – it allows you extract the colors from an uploaded image. Pretty cool, isn’t it?

Below is a demo for the Style Manager and all its settings.

Style Manager – Colors – Rosa2

Takeaways

  • Color meanings: choose colors that resonate with the statement you want to draw. For example, blue inspires safety, integrity, and peace, while yellow is translated into energy and joyfulness.
  • Maintain the contrast: for a bunch of situations, the dark colors go well with the light ones. Stay away from using a light one for the background and another one pretty similar for the body text. To be more specific: a yellow text on a white background would be hard to read for everyone.

Take into account that the colors selected in the Customizer are being applied on a site-wide level—this way, you know for sure that you’re consistent through the entire digital journey.

Updated on July 21, 2021

Can't find what you’re looking for? Ask a human.

We're a small team of real people providing real help. Send us an email at hello@pixelgrade.com and we will give you a helping hand.