Many blocks in the WordPress editor contain color settings for you to control the colors of your content. This guide will show you how to use these color settings.
Color settings can be applied to the whole site, specific elements on your site, or to a single block of content. The option to apply colors only appear on blocks that include color settings.
To edit the style settings for your whole site, follow these steps:
- Visit your site’s dashboard.
- Go to Appearance → Editor.
- Select “Styles” from the left-side menu.
Learn more about editing your site’s styles.
To change the style settings for a single block, follow these steps:
- Visit your site’s dashboard.
- Navigate to the page, post, or template you want to edit.
- Select the block you want to apply the style.
- Locate the block settings sidebar.
In most cases, the style settings will be in the main block settings sidebar. Occasionally, you will see a separate tab for styles, represented by a black and white circle.
Adjust the appearance of the block’s colors with the following settings.
If you don’t see the setting, click the three dots to the right of Color. You can then choose the option you want to access. Depending on the block you are using, you will see options like the following:
- Text
- Background
- Link (example: the Paragraph Block)
- Overlay (example: the Cover Block)
Click each setting once, and a checkmark will appear next to it. You can then close the three dots menu to view the setting.
The settings available will depend on the block you are using. Not all settings will be available on all blocks.
Using the color picker, you can select a color for different elements in the block, such as the text, background, and links. Click into each of the corresponding numbered sections as explained below:
- Click on the color circle next to the element you want to change.
- In the Color Picker that appears you have a couple of options for choosing a color:
- Select one of the theme’s default colors.
- Click the color box to select a custom color.
- Save your changes.
Change Default Colors
The theme you select may come with an existing palette of colors. You can change what colors appear in the palette by changing your theme’s colors.
Learn how to change your site’s colors using styles.
Use the Color Picker to Set a Color
In the color picker you can set a custom color either by selecting the color, saturation, and opacity, or by providing an exact Hex, HSL, or RGB code.
- Click into the box area to set a custom color.
- If you already have a custom color code that you’d like to use, you can paste it into the box area. This code will automatically update if you choose a different color using any of the other options.
- Otherwise, use the following options to select a custom color:
- Click and drag the circular icon anywhere within the box area to select a different shade of the current color.
- Click and drag the circular icon left or right to choose a different color.
- Click and drag the circular icon left or right to increase or decrease the opacity or transparency of your chosen color.
- Click on the dropdown icon to select a different color profile. You can choose between
Hex,RGB, andHSL.
Additionally, if you plan to use the color you set again, you can click the copy icon to copy the current color code to your clipboard.
To reset your color choice, click the Clear button at the bottom-right of the color selection area.
Gradients allow you to select two or more colors to gradually blend together. Gradient options most frequently appear for background color settings.
To set a gradient for an element, follow these steps:
- Click on the color circle next to the element you want to change.
- In the Color Picker locate the “Gradient” tab. You will have a couple of options to choose from:
- Select one of the theme’s default colors in several gradient styles.
- Use the custom options to set your own color, type and angle.
- Save your changes.
Change Default Colors
The theme you select may come with an existing palette of colors. You can change what colors appear in the palette by changing your theme’s colors.
Learn how to change your site’s colors using styles.
Use the Color Picker to Set Color, Type and Angle of Gradient
- Click the circular icon in the gradient editor to change the color on that part of the gradient using the Color Picker.
- Click any other section of the gradient editor to add another color.
- Move the circles to change the starting point of the gradient.
- Click on the dropdown icon to select the Type of gradient. You can choose between
LinearandRadial:- Linear creates a gradient between the two colors along a straight line.
- Radial starts from the center and moves to the borders.
- If using the linear type of gradient, edit the Angle using one of the following options:
- Edit the number in the box to select a custom value for the gradient Angle. This only appears when you’ve selected the
Lineargradient Type.
Click and drag the small colored dot within the circle to adjust the gradient Angle. This will automatically replace the value in the Angle box covered in #7 above.
- Edit the number in the box to select a custom value for the gradient Angle. This only appears when you’ve selected the
To reset your color choice, click the Clear button at the bottom-right of the color selection area.
The duotone filter option is a two-tone color effect you can apply to your image blocks like the Image and Cover blocks. Think black and white photos, but in any color combination you choose.
To get started, select the Duotone Filter button in the toolbar or block settings, and choose from the examples or set your own colors:
To set your own colors, select the dots within the color bars:
To remove the duotone filter, click the Clear button at the bottom-right of the color selection area.