When you activate a block theme, WordPress enables several types of color palettes:
Solid colors, gradients, and duotone image filters. The palettes can come from different sources: WordPress (Default), a theme or plugin, or a user. A user-created color palette is labeled as “custom”:
A theme or plugin can disable color palettes and color settings, which is why you will see different settings in different block themes.
The custom color palettes are part of the Styles interface, and resetting the styles in the Styles sidebar in the Site Editor will also remove your custom palettes.
Estimated reading time: 5 minutes
Last updated
User capabilities
Users can:
- Create custom palettes for solid colors and gradients but not duotone.
- Change the color value of the default palette and the theme palette, but can not rename or remove the colors.
- Add, name, edit, and remove colors in the custom color palettes.
It is important to know that only users with the correct privilege, such as Admin users, can create and edit custom color palettes. Users with the roles Editor, Author, and Contributor can use the palette and apply the colors to blocks in the block editor.
The custom color palette is shared, so if your website has more than one user, there will be one shared palette, not separate palettes for each user.
How to create a custom palette with solid colors
You can create custom color palettes in the Site Editor. So first, you need to activate your block theme.
Go to Appearance > Editor, enter the Site Editor, and open the Styles sidebar by clicking on the half-white, half-black circular icon next to the save button:
Open the Colors panel, select the “Solid” color tab, and scroll down to Custom. Here you will find a plus icon that you will use to add the new colors.
You can select a color using the color picker, or you can manually enter a value in either RGB, HSL, or hex format. You can also adjust the color opacity using the slider:
The default name of the color is Color 1. The second color will be named Color 2, and so on. You can click on the name field to add your own color name.
To delete a color, select it and then click on the – (minus) icon next to the name. You can use the color options menu (the three dots) to remove all colors.
When you are finished, select “Done” and don’t forget to save your changes.
How to create a custom gradient palette
Adding a custom gradient is a bit more fiddly than adding a custom solid color. It can be difficult to create so-called “hard stop” gradients and to set exact values using the gradient color picker tool.
The custom gradient palette option is in the same Styles sidebar as the solid color option but in the “Gradient” tab. In this image, there is a default gradient palette but no gradients added by the theme:
Click on the plus icon next to “Custom” to add a new gradient. Except for the color picker, the options are the same as for solid colors: You can add as many gradients as you need, name them, and remove them.
The gradient starts with two default colors. Clicking on the white circles will open the color modal, where you can use the color picker or enter your color values:
Clicking anywhere between the white circles will add a new color:
You can reposition the colors horizontally along the gradient by clicking, holding down the left mouse button, and dragging the circle:
In the type dropdown, you can select between linear or radial (circle):
You can adjust the angle by entering a numeric value or by using your mouse and dragging the small blue circle inside the larger white circle.
Custom duotone filter
Earlier, I wrote that users could not add a custom palette with duotone filters. The interface for this has not been built and added to WordPress yet. You can change the duotone on a per-image basis.
Select your image block in the editor. In the block toolbar, select the “Apply duotone filter” button, which looks like a black-and-white triangle:
Instead of selecting a duotone from the palette, either click on the color field or on the two texts that say Shadows and Highlights:
Inspiration and resources
If you want inspiration for your color palette, I recommend Adobe Colors.
Official documentation: