When you build a website with the Astra WordPress theme, you may wonder how to add a custom color palette to Astra that has your brand colors predefined.
Or if you’re just getting started with Astra, you may not even know that a custom color palette is an option.
While it’s simple to modify color settings for various blocks such as sections, headings, and text, you are limited to using the default color palette.
This default color palette allows you to choose a custom color where you can provide a specific color’s hex value.
As an example, look at the screenshot below.
I’ve clicked the “Select Color” button and provided a color value of #ff0000 to set a red heading color.
Or if I click “Select Color” I can choose from the default palette by clicking on one of the predefined color squares:
While this works fine, wouldn’t it be nice to have a custom palette of just the colors you want to use on your site?
When you add a custom color palette to Astra, you will be able to simply click on a color square of color values that you have defined.
As an example, see the screenshot below. The color palette shows my brand colors instead of the default colors:
I did this by adding a code snippet to the theme’s functions.php. And I’ll show you how to do that in just a bit.
The Gutenberg block editor comes with a default color palette, too:
When you add a custom color palette to Astra it also updates the Gutenberg color palette too:
So let’s learn how to add a custom color palette to Astra.
Astra Color Palette
The color palette appears in the Customizer whenever you attempt to change any element’s colors.
For example, go to Appearance > Customize > Global > Colors > Base Colors.
Click the “Select Color” button and the default palette displays:
But what we want is a custom palette with predefined brand colors like this:
We’ll do this by adding a few code snippets to functions.php.
Add a Custom Color Palette to Astra
Follow these steps to add a custom color palette to Astra.
1. Make a List of Color Values
First, make a list of all of the color values you want to add to the palette.
For this demo, we’ll create a palette using my logo and brand colors.
These are the color values and names I want to use:
- #ffffff – white
- #c7aad3 – very light purple
- #8d53a5 – light purple
- #56007a – purple
- #095aa5 – blue
- #b5c6e0 – light blue
- #aaaaaa – dark gray
- #000000 – black
Next we need to modify the child theme functions.php to define these colors.
2. Make a copy of functions.php
Make a copy of functions.php before you edit it. You can do this through cPanel or FTP.
The reason I recommend this is because If you make a mistake when adding the code, you can break your site and get a white screen of death.
But if you have a backup of functions.php, you can simply copy the original file back and your site will be up and running in no time!
3. Edit Your Astra Child Theme
If you don’t have a child theme, stop right now and make sure to create an Astra child theme before going any further with this tutorial.
Creating a child theme will keep your site customizations preserved whenever an Astra theme update gets released. So you won’t have to worry about losing all of your hard work.
Then once you have a child theme created, you are ready to proceed.
Add the following code into the child theme functions.php and replace the color values with the ones you want for your site.
4. Add Code to functions.php
You can get the above code in one of two ways:
Download Sample Code for functions.php
- Click the functions-php-code link below to access the raw code and open the file.
- Or click the download button below to save the raw code on your local computer.
That’s it! By following the steps above you should be able to add a custom color palette to Astra.
Now it’s important to test that you did everything correctly.
NOTE: To test, you will most likely have to log out of your site and log back in to ensure the new functions.php is loaded.
Test the Code
One way you can test is by going to Appearance > Customize > Global > Colors > Base Colors.
You can see in the below screenshot that our new color palette has been added:
That’s it! We were able to successfully add a custom color palette to Astra!
And you’ll see the custom color palette was added to Gutenberg block editor as well:
Note the new color palette has replaced the default color palette.
And note that you can still add a custom color that’s beyond the colors you’ve defined in the palette.
Simply click the “custom color” link to do so.
Summary of Steps to Add Custom Color Palette to Astra
It takes a bit of preparation and care to ensure that you properly add the code to functions.php.
But once you’ve done it, you will greatly simplify the task of customizing your website colors!
In summary, follow the steps below to add custom color palette to Astra:
- Make a list of color values.
- Download the sample code file to your local computer.
- Edit the file to change the color values from the sample code to your color values and save the file.
- Log into cPanel or FTP to get access to your web server.
- Make a copy of Astra child theme functions.php in case something goes wrong.
- Copy and paste the sample code into your Astra child theme functions.php.
- Save the file.
- Test the changes.
I hope this helps you understand how to add a customer color palette to Astra and Gutenberg.
Any questions? Please post in the comments below and I’ll be happy to help!