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.
To start using Global Colors, from your Dashboard navigate to Appearance > Customize.
Select Colors & Background.
Your website will have multiple color palettes that can be used right away: Base, Dark Mode, the template color palette, and possibly a custom color palette built just for your website.
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.
Add Your Custom Color Palette #
You have the ability to have up to 4 custom color palettes. To create one of your own, complete the following 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.
Step 4: #
Click on the Add button.
You now have a new color palette, that can be customized to fit your taste. Select the color of your choice for each option of the palette and publish the changes.
Global Colors And Your Website #
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.
Global Colors In Your Blog Posts #
To have a completely unified color palette across your site, you can’t forget about each individual post
Your global colors can easily be applied in the post 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.
