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 when you set the color scheme of your website, 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) → Appearance → Customize → Style Manager → Colors. Once you are there, you will find three areas:

• Palettes – here’s the place where you will find all the pre-built color palettes. Just click on one of them, and all the colors on your website will change instantly;
• Filters – adjust the color properties by using the available filters. These filters keep the original color palette and alters the color shades, giving them more saturation or less, depending on your preferences;
• Customize – these advanced controls allow you to go even further by customizing the Coloration Level, Color Diversity, and Shuffle Colors. This section also gives you access to a Dark mode—with a click of a button, you can switch your website to a darker version, and all the colors will adapt instantly with no effort on your part.

Below is a demo for the Style Manager using Patch, our minimalistic WordPress blog theme. Have no worries if you are using Jason—the settings are the same.

Creating your own color palette

To create your own palette, all you have to do is go to the Style Manager → Colors and, using the color pickers at the top, change the colors one by one. This will ensure that your edits will apply instantly across the website. You can use the color picker like in the example below or insert the appropriate HEX color code. Use the preview section on the right to see your changes live.

If you believe you have knowledge in this area and want a more granular approach to colors, you can do that by navigating to Appearance → Customize→ Theme Options → Colors. You have access to several different sub-sections with controls for the color of various elements on your site.

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.