Managing color palettes

Level: ,

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”:

Three color palettes with circular color symbols. The palettes are labeled theme, default, and 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:

The Site Editor with the Styles sidebar opened.

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 color picker with the RGB settings opened. Each partial color code uses a numeric input field and a range 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:

The gradient tab under Styles > Colors.

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:

The gradient color picker uses several modals. Clicking on one of the default colors opens the color picker modal.

Clicking anywhere between the white circles will add a new color:

The gradient option indicates where the new color will be added by showing a black plus icon with a white background.

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:

The block toolbar with the duotone filter selected.

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: