Global Colors in Neve

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:

Colors play an extremely significant role in website design. It can influence your public's attention, interest and if a customer doesn't like the look of your site it is very possible that they leave and never return.

This is why you have to take into consideration matching colors or test the contrast. We have made available for you some links to help in building a website:

You have to 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. 

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.

Using the new Global Colors option in Neve, you can easily create a beautifully unified color palette on your site.


Getting Started with Global Colors

Step 1:

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

Step 2:

Select  Colors & Background.

Neve comes with two base color palettes, that can be used right away: Base and Dark Mode. You can even create your own palettes and apply them sitewide.

Each color palette consists of nine colors, that apply across your site, and can be customized to match your taste: 

  • Primary Accent - Button color, link color
  • Secondary Accent - Hover color
  • Site Background - Default background color of the site
  • Light Background - Background color of the surfaces that have a light background
  • Dark Background - Background color of the surfaces that have a dark background
  • Text Color - Default text color (readable for site and light background)
  • Text Dark Background - Text color (readable for dark background)
  • Extra Color 1 - Background color for sale tag, Positive Cart Notice
  • Extra Color 2 - Background color for Negative Cart Notice

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

Now we should be able to see the difference:


Add your custom color

With Neve you can also create your own custom color palette, starting from one of the two bases.

To do that follow these steps:

Step 1:

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

Step 2:

Add a title for the palette (1).

Step 3: 

Choose a base palette that you want to start from ( Base or Dark Mode ) (2).

Step 4:

Click on the Add button (3).

You now have a new color palette (1), that can be customized to fit your taste. Select the color of your choice for each option of the palette (2) and publish the changes (3).

You can always come back and make changes to the colors, that will reflect across your entire site.


Global Colors in the 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:

1. To use one of the global colors from the current color palette

  • To have access to the global colors, click on the little globe icon in front of the select colors option and select the color of your choice.

2. To use a different custom color

  • In this case, just click on the select colors option near the little globe icon.

In this example, we've used one of the global colors from the color palette, for the Button component. This means that any change done to that color in the color palette will automatically apply to the button, keeping the site look consistent across all pages.


Global Colors in Elementor

Neve's Global Colors are directly integrated with Elementor as well. While editing your page with the page builder, when choosing a custom color for one of the elements in the page, you have two options:

1. To use one of the global colors from the current color palette. 

  • To have access to the global colors, click on the little globe icon (1) in front of the select colors option and select the color of your choice. You will see there all global color options coming from Elementor itself, but also the global colors coming from Neve. To easily recognize them, all colors coming from Neve, have the word Neve attached to their names.

2. To use a different custom color

  •  In this case, just click on the select colors option near the little globe icon. 


Global Colors in the editor ( Gutenberg )

To have a completely unified color palette across your site, you can't forget about each individual post or page content. 

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 click on the color of your choice, or use a custom color.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.