Global Colors in Neve

Colors play an extremely significant role in website design. It can influence your public's attention and interest, and if a customer doesn't like the look of your site, it is very possible that they leave and never return. Using the new Global Colors option in Neve, you can easily create a beautifully unified color palette on your website.

👁 Overview

For a better understanding, here is a quick overview of what each color does:

And here is a Starter Site example, using the same Color Palette:

⚙️ Getting Started with Global Colors

To start using Global Colors from your WordPress Dashboard, navigate to  Appearance > Customize, then select  Colors & Background.

Neve comes with two base color palettes: Base and Dark Mode. Each color palette consists of nine colors that apply across your website and can be customized to match your taste, as we described in the screenshots above.

If you want to return to the initial state, click on the Reset all to default button.

🎨 Custom Palette

1

Click on the Add Custom Palette button near the base palettes.

2

Add a title for the palette, choose a base palette from which you want to start, and click on Add.

You now have a new color palette that can be customized. Select the color of your choice for each palette option and publish the changes.

🌈 Custom Colors

This feature adds new color options on top of the existing ones so that you can enhance the color palette with new colors apart from the 9 that already exist.

📝Note: For each new color, you can edit the label or delete it.

These new colors can be used across your website, in the Customizer, or inside the page editors (Gutenberg, Elementor):

As you can see here, the new custom color (purple) appeared inside the editor.

Using the Global Colors

🖌 Global Colors in Customizer

As their name suggests, global colors from the color palettes can be used globally across your site. When selecting the color of your choice for (most) elements in Customizer, you have two options:

Access Global Colors

To access the global colors, click on the 🌐  icon in front of the select colors option and select the color of your choice.

Use Color Picker

In this case, just click on the square color option next to the globe icon.

Global Colors in Elementor

Neve's Global Colors are directly integrated with Elementor as well. When editing your page, you can choose a global color for the elements on the page.

Click on the globe icon to access the global colors and select the desired color. You will see there all global color options coming from Elementor itself, but also the global colors coming from Neve. 

📝Note: To easily recognize them, all colors coming from Neve have the word Neve attached to their names.

Global Colors in Gutenberg 

Neve's global colors can easily be applied in the Gutenberg editor for each individual block. The colors from the current color palette are automatically selectable from each block's color options. Just select the desired global color, or use the color picker to use a custom color.

📝Note: Here, you can see the base colors from the custom palette + the custom color that we added in the above steps.

🗂 Useful Resources

This is why you must consider matching colors or testing the contrast. We have made available for you some links to help in building a website:

• Adobe Color Contrast Analyzer - helps you check the contrast between background and text or graphic components' color.

You must  add a color for the text and one for the background (left) and see how the contrast works (right). Make sure that every test is passed by checking the message below. 

• Colorblind Web Page Filter - helps you see how the website looks to people with different types of color blindness.

You have to introduce the URL of the page (1), select an anomaly (2) and see how the page looks like (3) for people having that anomaly.