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.
| Add Custom Palette
|| Add Custom Colors
| Using the Global Colors
|| Useful Resources
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
- Click on the Add Custom Palette button near the base palettes.
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.
📝 Note: You can always come back and change the colors that will reflect across your entire site.
🌈 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
|| Global Colors in Elementor
|| Global Colors in Gutenberg
🖌 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.
📝 Note: 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. 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.