### Let’s Add Our Own Color

Let’s add our own by first defining a color variable (this is a deep red color):

Then we’ll add an array to the existing list (in your case you may have had to write the editor-color-palette function yourself):

Now, if you refresh the Gutenberg editor, you’ll see a color swatch has been added to the palette (both text colors and background colors) and you can use it on your content!

Mission accomplished! Well, not quite.

## 3. Write the Corresponding CSS

You can use the color in your content on the back end, in the Gutenberg editor, but you won’t see it on the front end. This is because we now have to create a CSS rule to reflect it.

For example, if you go ahead and apply the “Adi Custom” color to some text, save it, then hit refresh on the front end, you won’t see any change. But if you inspect the code you’ll see a new class has been applied to the text you changed:

You’ll recognize the slug adicustom in amongst that class name, so all we have to do is define a couple of rules using that selector. We need to define one for when text color is used, and another for when background color is used, so we do that in our theme’s style.css file. For example:

For an extra layer of control you may want to use custom CSS variables for this step. Check out my short course to learn all about them!

## Key Takeaways

And we’re done! That simple trick will give you, as a theme developer, a little more control over how your theme is used. Let’s go over what we learned:

1. Limiting the available colors in Gutenberg allows you to stay within branding guidelines and avoids accessibility issues.
2. Disable the custom color picker and define your new palette within your theme’s functions.php file.
3. Remember to write the corresponding CSS for the new colors inside your theme’s style.css file.