{"id":16075254,"date":"2022-11-02T07:22:09","date_gmt":"2022-11-02T07:22:09","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=16075254"},"modified":"2026-05-23T14:34:25","modified_gmt":"2026-05-23T14:34:25","slug":"colors-settings-overview","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/colors-settings-overview\/","title":{"rendered":"Colors Settings overview"},"content":{"rendered":"\n

You can use the color settings in your block<\/a> to set the text color, background color, link color, gradient options, and duotone filters for your content. They are designed to make it as simple as possible to update your block’s colors.<\/p>\n\n\n\n

The color settings available will vary based on the theme and the block in use.<\/p>\n\n\n\n

How to access color settings <\/h2>\n\n\n\n

Colors can be set on a site basis or on a block basis. Setting color on a site basis will affect the color of the entire site.<\/p>\n\n\n\n

How to access color settings for your site<\/h3>\n\n\n\n
    \n
  1. From your Administration Screens, Select Appearance > Editor<\/li>\n\n\n\n
  2. Select Styles<\/li>\n\n\n\n
  3. Select Colors<\/li>\n<\/ol>\n\n\n\n

    How to access color settings for a single block<\/h3>\n\n\n\n
      \n
    1. Select the block you want to modify the color<\/li>\n\n\n\n
    2. Open the Block Settings sidebar of a block by clicking the Settings icon that is to the right of the Publish or Save buttons.<\/li>\n\n\n\n
    3. Find the Color section.<\/li>\n\n\n\n
    4. or, In some blocks (e.g. Group block), the Color section is located in the Styles tab represented by a black and white circle.<\/li>\n<\/ol>\n\n\n\n
      \n
      \n
      \"Color
      Color settings of Paragraph block<\/figcaption><\/figure>\n<\/div>\n\n\n\n
      \n
      \"Color
      Color settings of Group block<\/figcaption><\/figure>\n<\/div>\n\n\n\n
      <\/div>\n<\/div>\n\n\n\n

      Viewing all settings<\/h3>\n\n\n\n
      \"All
      All color settings and Reset all<\/figcaption><\/figure>\n\n\n\n

      In the Color section, click on the three-dot menu (also known as an ellipsis) to explore all the color settings that are not visible by default. Note that not every block supports all the color settings.<\/p>\n\n\n\n

      Resetting all settings<\/h3>\n\n\n\n

      If you make customizations to these settings and want to revert back to the original settings quickly, you can do so by selecting the three-dot menu icon and clicking Reset all<\/strong>. This resets the settings and removes all of your changes.<\/p>\n\n\n\n

      Add a custom color<\/h3>\n\n\n\n

      To add a custom color, click on the color box above the color palette options. It may read “no color selected” if your block is using the default color.<\/p>\n\n\n\n

      \"Example<\/figure>\n\n\n\n

      Next, you can paste in a color HEX code or named color value such as black, darkblue, or deeppink.<\/p>\n\n\n\n

      \"Editor<\/figure>\n\n\n\n

      Type of settings <\/h2>\n\n\n\n

      Each supported block comes with different color settings.<\/p>\n\n\n\n

      Text and background colors<\/h3>\n\n\n\n

      This option allows you to change the color of the text, and background on the block you are working on. A combination of these color settings can be used to call attention to your most important content.<\/p>\n\n\n\n

      You can pick a color from the color palette of your theme. You can also add a custom color from the color picker or enter the HEX, RGB, or HSL color values based on your brand. Click the two rectangle boxes next to the color slider to copy the HEX, RGB, or HSL color values. <\/p>\n\n\n\n