{"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":"2023-01-11T15:02:40","modified_gmt":"2023-01-11T15:02:40","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.\u00a0They are designed to make it as simple as possible to update your block’s colors.<\/p>\n\n\n\nThe color settings are available when you use the\u00a0block editor<\/a>. If you are new to the block editor,\u00a0this guide<\/a>\u00a0will show you how to work with blocks. You can read more about the new block editor features and improvements\u00a0in this article.<\/a><\/p>\n\n\n\nThe color settings available will vary based on the theme and the block in use.<\/p>\n\n\n\n<\/div>\n\n\n\nHow to access color settings <\/h2>\n\n\n\n\n\nThe color settings can be found on the Block Settings sidebar of a block<\/a> under the section Color<\/strong>.<\/p>\n\n\n\nIf you don\u2019t see the Block Settings<\/strong> sidebar, select the block you want to customize, then click the settings<\/strong> icon (a cog) that is to the right of the Publish<\/strong> or Update<\/strong> buttons in the WordPress Editor.<\/p>\n\n\n\nIn the Color<\/strong> 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<\/div>\n\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nIf 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> as shown in this article<\/a>. This resets the settings and removes all of your changes.<\/p>\n\n\n\nType of settings <\/h2>\n\n\n\nEach supported block comes with different color settings.<\/p>\n\n\n\nText and background colors<\/h3>\n\n\n\nThis 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\nYou 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<\/video><\/figure>\n\n\n\nAccessibility tests are built into the editor to warn you when the text may become hard to read against the background color choices as shown below.<\/p>\n\n\n\n<\/figure>\n\n\n\nLink colors<\/h3>\n\n\n\nOn some blocks, you will find the option to change the link color. <\/p>\n\n\n\n<\/figure>\n\n\n\nGradient background colors<\/h3>\n\n\n\n\n\nSome blocks such as the Heading block<\/a> allow you to set either a solid color or a gradient as the background. A gradient is a mix of two or more colors, displayed using a certain pattern (from lighter to darker, or one color blending into the other).<\/p>\n<\/div>\n\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nA slider will appear that shows the two color points that make up the gradient. <\/p>\n\n\n\n<\/figure>\n\n\n\nYou can click on any of the two color points to display the color picker for changing the color value. You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values.<\/p>\n\n\n\nYou can add additional color points if you like by clicking the\u00a0+<\/strong>\u00a0icon that appears when you hover over the gradient slider.<\/p>\n\n\n\n\n\n<\/figure>\n<\/div>\n\n\n\n\n<\/p>\n\n\n\nYou can choose between the Linear<\/strong> or Radial<\/strong> gradient type. The angle control shifts the position of the gradient.<\/p>\n\n\n\nThe Linear<\/strong> type creates a gradient between the two colors along a straight line, whereas the Radial<\/strong> type starts from the center and moves to the borders.<\/p>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nDuotone filter<\/h3>\n\n\n\nYou can create a two-tone color effect (called the duotone effect) on images without actually changing the original image<\/p>\n\n\n\nThe duotone filter option allows you to add this filter color to your block content from the block toolbar. The filter can be black, white, or\u00a0any<\/em>\u00a0other color combination of your choosing. The duotone effect works best on high-contrast images.\u00a0<\/p>\n\n\n\nTo get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\nYou can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The color settings are available when you use the\u00a0block editor<\/a>. If you are new to the block editor,\u00a0this guide<\/a>\u00a0will show you how to work with blocks. You can read more about the new block editor features and improvements\u00a0in this article.<\/a><\/p>\n\n\n\nThe color settings available will vary based on the theme and the block in use.<\/p>\n\n\n\n<\/div>\n\n\n\nHow to access color settings <\/h2>\n\n\n\n\n\nThe color settings can be found on the Block Settings sidebar of a block<\/a> under the section Color<\/strong>.<\/p>\n\n\n\nIf you don\u2019t see the Block Settings<\/strong> sidebar, select the block you want to customize, then click the settings<\/strong> icon (a cog) that is to the right of the Publish<\/strong> or Update<\/strong> buttons in the WordPress Editor.<\/p>\n\n\n\nIn the Color<\/strong> 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<\/div>\n\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nIf 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> as shown in this article<\/a>. This resets the settings and removes all of your changes.<\/p>\n\n\n\nType of settings <\/h2>\n\n\n\nEach supported block comes with different color settings.<\/p>\n\n\n\nText and background colors<\/h3>\n\n\n\nThis 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\nYou 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<\/video><\/figure>\n\n\n\nAccessibility tests are built into the editor to warn you when the text may become hard to read against the background color choices as shown below.<\/p>\n\n\n\n<\/figure>\n\n\n\nLink colors<\/h3>\n\n\n\nOn some blocks, you will find the option to change the link color. <\/p>\n\n\n\n<\/figure>\n\n\n\nGradient background colors<\/h3>\n\n\n\n\n\nSome blocks such as the Heading block<\/a> allow you to set either a solid color or a gradient as the background. A gradient is a mix of two or more colors, displayed using a certain pattern (from lighter to darker, or one color blending into the other).<\/p>\n<\/div>\n\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nA slider will appear that shows the two color points that make up the gradient. <\/p>\n\n\n\n<\/figure>\n\n\n\nYou can click on any of the two color points to display the color picker for changing the color value. You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values.<\/p>\n\n\n\nYou can add additional color points if you like by clicking the\u00a0+<\/strong>\u00a0icon that appears when you hover over the gradient slider.<\/p>\n\n\n\n\n\n<\/figure>\n<\/div>\n\n\n\n\n<\/p>\n\n\n\nYou can choose between the Linear<\/strong> or Radial<\/strong> gradient type. The angle control shifts the position of the gradient.<\/p>\n\n\n\nThe Linear<\/strong> type creates a gradient between the two colors along a straight line, whereas the Radial<\/strong> type starts from the center and moves to the borders.<\/p>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nDuotone filter<\/h3>\n\n\n\nYou can create a two-tone color effect (called the duotone effect) on images without actually changing the original image<\/p>\n\n\n\nThe duotone filter option allows you to add this filter color to your block content from the block toolbar. The filter can be black, white, or\u00a0any<\/em>\u00a0other color combination of your choosing. The duotone effect works best on high-contrast images.\u00a0<\/p>\n\n\n\nTo get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\nYou can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The color settings available will vary based on the theme and the block in use.<\/p>\n\n\n\n
The color settings can be found on the Block Settings sidebar of a block<\/a> under the section Color<\/strong>.<\/p>\n\n\n\nIf you don\u2019t see the Block Settings<\/strong> sidebar, select the block you want to customize, then click the settings<\/strong> icon (a cog) that is to the right of the Publish<\/strong> or Update<\/strong> buttons in the WordPress Editor.<\/p>\n\n\n\nIn the Color<\/strong> 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<\/div>\n\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nIf 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> as shown in this article<\/a>. This resets the settings and removes all of your changes.<\/p>\n\n\n\nType of settings <\/h2>\n\n\n\nEach supported block comes with different color settings.<\/p>\n\n\n\nText and background colors<\/h3>\n\n\n\nThis 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\nYou 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<\/video><\/figure>\n\n\n\nAccessibility tests are built into the editor to warn you when the text may become hard to read against the background color choices as shown below.<\/p>\n\n\n\n<\/figure>\n\n\n\nLink colors<\/h3>\n\n\n\nOn some blocks, you will find the option to change the link color. <\/p>\n\n\n\n<\/figure>\n\n\n\nGradient background colors<\/h3>\n\n\n\n\n\nSome blocks such as the Heading block<\/a> allow you to set either a solid color or a gradient as the background. A gradient is a mix of two or more colors, displayed using a certain pattern (from lighter to darker, or one color blending into the other).<\/p>\n<\/div>\n\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nA slider will appear that shows the two color points that make up the gradient. <\/p>\n\n\n\n<\/figure>\n\n\n\nYou can click on any of the two color points to display the color picker for changing the color value. You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values.<\/p>\n\n\n\nYou can add additional color points if you like by clicking the\u00a0+<\/strong>\u00a0icon that appears when you hover over the gradient slider.<\/p>\n\n\n\n\n\n<\/figure>\n<\/div>\n\n\n\n\n<\/p>\n\n\n\nYou can choose between the Linear<\/strong> or Radial<\/strong> gradient type. The angle control shifts the position of the gradient.<\/p>\n\n\n\nThe Linear<\/strong> type creates a gradient between the two colors along a straight line, whereas the Radial<\/strong> type starts from the center and moves to the borders.<\/p>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nDuotone filter<\/h3>\n\n\n\nYou can create a two-tone color effect (called the duotone effect) on images without actually changing the original image<\/p>\n\n\n\nThe duotone filter option allows you to add this filter color to your block content from the block toolbar. The filter can be black, white, or\u00a0any<\/em>\u00a0other color combination of your choosing. The duotone effect works best on high-contrast images.\u00a0<\/p>\n\n\n\nTo get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\nYou can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
If you don\u2019t see the Block Settings<\/strong> sidebar, select the block you want to customize, then click the settings<\/strong> icon (a cog) that is to the right of the Publish<\/strong> or Update<\/strong> buttons in the WordPress Editor.<\/p>\n\n\n\nIn the Color<\/strong> 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<\/div>\n\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nIf 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> as shown in this article<\/a>. This resets the settings and removes all of your changes.<\/p>\n\n\n\nType of settings <\/h2>\n\n\n\nEach supported block comes with different color settings.<\/p>\n\n\n\nText and background colors<\/h3>\n\n\n\nThis 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\nYou 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<\/video><\/figure>\n\n\n\nAccessibility tests are built into the editor to warn you when the text may become hard to read against the background color choices as shown below.<\/p>\n\n\n\n<\/figure>\n\n\n\nLink colors<\/h3>\n\n\n\nOn some blocks, you will find the option to change the link color. <\/p>\n\n\n\n<\/figure>\n\n\n\nGradient background colors<\/h3>\n\n\n\n\n\nSome blocks such as the Heading block<\/a> allow you to set either a solid color or a gradient as the background. A gradient is a mix of two or more colors, displayed using a certain pattern (from lighter to darker, or one color blending into the other).<\/p>\n<\/div>\n\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nA slider will appear that shows the two color points that make up the gradient. <\/p>\n\n\n\n<\/figure>\n\n\n\nYou can click on any of the two color points to display the color picker for changing the color value. You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values.<\/p>\n\n\n\nYou can add additional color points if you like by clicking the\u00a0+<\/strong>\u00a0icon that appears when you hover over the gradient slider.<\/p>\n\n\n\n\n\n<\/figure>\n<\/div>\n\n\n\n\n<\/p>\n\n\n\nYou can choose between the Linear<\/strong> or Radial<\/strong> gradient type. The angle control shifts the position of the gradient.<\/p>\n\n\n\nThe Linear<\/strong> type creates a gradient between the two colors along a straight line, whereas the Radial<\/strong> type starts from the center and moves to the borders.<\/p>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nDuotone filter<\/h3>\n\n\n\nYou can create a two-tone color effect (called the duotone effect) on images without actually changing the original image<\/p>\n\n\n\nThe duotone filter option allows you to add this filter color to your block content from the block toolbar. The filter can be black, white, or\u00a0any<\/em>\u00a0other color combination of your choosing. The duotone effect works best on high-contrast images.\u00a0<\/p>\n\n\n\nTo get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\nYou can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
In the Color<\/strong> 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<\/div>\n\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nIf 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> as shown in this article<\/a>. This resets the settings and removes all of your changes.<\/p>\n\n\n\nType of settings <\/h2>\n\n\n\nEach supported block comes with different color settings.<\/p>\n\n\n\nText and background colors<\/h3>\n\n\n\nThis 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\nYou 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<\/video><\/figure>\n\n\n\nAccessibility tests are built into the editor to warn you when the text may become hard to read against the background color choices as shown below.<\/p>\n\n\n\n<\/figure>\n\n\n\nLink colors<\/h3>\n\n\n\nOn some blocks, you will find the option to change the link color. <\/p>\n\n\n\n<\/figure>\n\n\n\nGradient background colors<\/h3>\n\n\n\n\n\nSome blocks such as the Heading block<\/a> allow you to set either a solid color or a gradient as the background. A gradient is a mix of two or more colors, displayed using a certain pattern (from lighter to darker, or one color blending into the other).<\/p>\n<\/div>\n\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nA slider will appear that shows the two color points that make up the gradient. <\/p>\n\n\n\n<\/figure>\n\n\n\nYou can click on any of the two color points to display the color picker for changing the color value. You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values.<\/p>\n\n\n\nYou can add additional color points if you like by clicking the\u00a0+<\/strong>\u00a0icon that appears when you hover over the gradient slider.<\/p>\n\n\n\n\n\n<\/figure>\n<\/div>\n\n\n\n\n<\/p>\n\n\n\nYou can choose between the Linear<\/strong> or Radial<\/strong> gradient type. The angle control shifts the position of the gradient.<\/p>\n\n\n\nThe Linear<\/strong> type creates a gradient between the two colors along a straight line, whereas the Radial<\/strong> type starts from the center and moves to the borders.<\/p>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nDuotone filter<\/h3>\n\n\n\nYou can create a two-tone color effect (called the duotone effect) on images without actually changing the original image<\/p>\n\n\n\nThe duotone filter option allows you to add this filter color to your block content from the block toolbar. The filter can be black, white, or\u00a0any<\/em>\u00a0other color combination of your choosing. The duotone effect works best on high-contrast images.\u00a0<\/p>\n\n\n\nTo get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\nYou can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
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> as shown in this article<\/a>. This resets the settings and removes all of your changes.<\/p>\n\n\n\nType of settings <\/h2>\n\n\n\nEach supported block comes with different color settings.<\/p>\n\n\n\nText and background colors<\/h3>\n\n\n\nThis 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\nYou 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<\/video><\/figure>\n\n\n\nAccessibility tests are built into the editor to warn you when the text may become hard to read against the background color choices as shown below.<\/p>\n\n\n\n<\/figure>\n\n\n\nLink colors<\/h3>\n\n\n\nOn some blocks, you will find the option to change the link color. <\/p>\n\n\n\n<\/figure>\n\n\n\nGradient background colors<\/h3>\n\n\n\n\n\nSome blocks such as the Heading block<\/a> allow you to set either a solid color or a gradient as the background. A gradient is a mix of two or more colors, displayed using a certain pattern (from lighter to darker, or one color blending into the other).<\/p>\n<\/div>\n\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nA slider will appear that shows the two color points that make up the gradient. <\/p>\n\n\n\n<\/figure>\n\n\n\nYou can click on any of the two color points to display the color picker for changing the color value. You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values.<\/p>\n\n\n\nYou can add additional color points if you like by clicking the\u00a0+<\/strong>\u00a0icon that appears when you hover over the gradient slider.<\/p>\n\n\n\n\n\n<\/figure>\n<\/div>\n\n\n\n\n<\/p>\n\n\n\nYou can choose between the Linear<\/strong> or Radial<\/strong> gradient type. The angle control shifts the position of the gradient.<\/p>\n\n\n\nThe Linear<\/strong> type creates a gradient between the two colors along a straight line, whereas the Radial<\/strong> type starts from the center and moves to the borders.<\/p>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nDuotone filter<\/h3>\n\n\n\nYou can create a two-tone color effect (called the duotone effect) on images without actually changing the original image<\/p>\n\n\n\nThe duotone filter option allows you to add this filter color to your block content from the block toolbar. The filter can be black, white, or\u00a0any<\/em>\u00a0other color combination of your choosing. The duotone effect works best on high-contrast images.\u00a0<\/p>\n\n\n\nTo get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\nYou can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Each supported block comes with different color settings.<\/p>\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<\/video><\/figure>\n\n\n\nAccessibility tests are built into the editor to warn you when the text may become hard to read against the background color choices as shown below.<\/p>\n\n\n\n<\/figure>\n\n\n\nLink colors<\/h3>\n\n\n\nOn some blocks, you will find the option to change the link color. <\/p>\n\n\n\n<\/figure>\n\n\n\nGradient background colors<\/h3>\n\n\n\n\n\nSome blocks such as the Heading block<\/a> allow you to set either a solid color or a gradient as the background. A gradient is a mix of two or more colors, displayed using a certain pattern (from lighter to darker, or one color blending into the other).<\/p>\n<\/div>\n\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nA slider will appear that shows the two color points that make up the gradient. <\/p>\n\n\n\n<\/figure>\n\n\n\nYou can click on any of the two color points to display the color picker for changing the color value. You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values.<\/p>\n\n\n\nYou can add additional color points if you like by clicking the\u00a0+<\/strong>\u00a0icon that appears when you hover over the gradient slider.<\/p>\n\n\n\n\n\n<\/figure>\n<\/div>\n\n\n\n\n<\/p>\n\n\n\nYou can choose between the Linear<\/strong> or Radial<\/strong> gradient type. The angle control shifts the position of the gradient.<\/p>\n\n\n\nThe Linear<\/strong> type creates a gradient between the two colors along a straight line, whereas the Radial<\/strong> type starts from the center and moves to the borders.<\/p>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nDuotone filter<\/h3>\n\n\n\nYou can create a two-tone color effect (called the duotone effect) on images without actually changing the original image<\/p>\n\n\n\nThe duotone filter option allows you to add this filter color to your block content from the block toolbar. The filter can be black, white, or\u00a0any<\/em>\u00a0other color combination of your choosing. The duotone effect works best on high-contrast images.\u00a0<\/p>\n\n\n\nTo get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\nYou can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Accessibility tests are built into the editor to warn you when the text may become hard to read against the background color choices as shown below.<\/p>\n\n\n\n<\/figure>\n\n\n\nLink colors<\/h3>\n\n\n\nOn some blocks, you will find the option to change the link color. <\/p>\n\n\n\n<\/figure>\n\n\n\nGradient background colors<\/h3>\n\n\n\n\n\nSome blocks such as the Heading block<\/a> allow you to set either a solid color or a gradient as the background. A gradient is a mix of two or more colors, displayed using a certain pattern (from lighter to darker, or one color blending into the other).<\/p>\n<\/div>\n\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nA slider will appear that shows the two color points that make up the gradient. <\/p>\n\n\n\n<\/figure>\n\n\n\nYou can click on any of the two color points to display the color picker for changing the color value. You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values.<\/p>\n\n\n\nYou can add additional color points if you like by clicking the\u00a0+<\/strong>\u00a0icon that appears when you hover over the gradient slider.<\/p>\n\n\n\n\n\n<\/figure>\n<\/div>\n\n\n\n\n<\/p>\n\n\n\nYou can choose between the Linear<\/strong> or Radial<\/strong> gradient type. The angle control shifts the position of the gradient.<\/p>\n\n\n\nThe Linear<\/strong> type creates a gradient between the two colors along a straight line, whereas the Radial<\/strong> type starts from the center and moves to the borders.<\/p>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nDuotone filter<\/h3>\n\n\n\nYou can create a two-tone color effect (called the duotone effect) on images without actually changing the original image<\/p>\n\n\n\nThe duotone filter option allows you to add this filter color to your block content from the block toolbar. The filter can be black, white, or\u00a0any<\/em>\u00a0other color combination of your choosing. The duotone effect works best on high-contrast images.\u00a0<\/p>\n\n\n\nTo get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\nYou can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
On some blocks, you will find the option to change the link color. <\/p>\n\n\n\n<\/figure>\n\n\n\nGradient background colors<\/h3>\n\n\n\n\n\nSome blocks such as the Heading block<\/a> allow you to set either a solid color or a gradient as the background. A gradient is a mix of two or more colors, displayed using a certain pattern (from lighter to darker, or one color blending into the other).<\/p>\n<\/div>\n\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nA slider will appear that shows the two color points that make up the gradient. <\/p>\n\n\n\n<\/figure>\n\n\n\nYou can click on any of the two color points to display the color picker for changing the color value. You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values.<\/p>\n\n\n\nYou can add additional color points if you like by clicking the\u00a0+<\/strong>\u00a0icon that appears when you hover over the gradient slider.<\/p>\n\n\n\n\n\n<\/figure>\n<\/div>\n\n\n\n\n<\/p>\n\n\n\nYou can choose between the Linear<\/strong> or Radial<\/strong> gradient type. The angle control shifts the position of the gradient.<\/p>\n\n\n\nThe Linear<\/strong> type creates a gradient between the two colors along a straight line, whereas the Radial<\/strong> type starts from the center and moves to the borders.<\/p>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nDuotone filter<\/h3>\n\n\n\nYou can create a two-tone color effect (called the duotone effect) on images without actually changing the original image<\/p>\n\n\n\nThe duotone filter option allows you to add this filter color to your block content from the block toolbar. The filter can be black, white, or\u00a0any<\/em>\u00a0other color combination of your choosing. The duotone effect works best on high-contrast images.\u00a0<\/p>\n\n\n\nTo get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\nYou can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Some blocks such as the Heading block<\/a> allow you to set either a solid color or a gradient as the background. A gradient is a mix of two or more colors, displayed using a certain pattern (from lighter to darker, or one color blending into the other).<\/p>\n<\/div>\n\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nA slider will appear that shows the two color points that make up the gradient. <\/p>\n\n\n\n<\/figure>\n\n\n\nYou can click on any of the two color points to display the color picker for changing the color value. You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values.<\/p>\n\n\n\nYou can add additional color points if you like by clicking the\u00a0+<\/strong>\u00a0icon that appears when you hover over the gradient slider.<\/p>\n\n\n\n\n\n<\/figure>\n<\/div>\n\n\n\n\n<\/p>\n\n\n\nYou can choose between the Linear<\/strong> or Radial<\/strong> gradient type. The angle control shifts the position of the gradient.<\/p>\n\n\n\nThe Linear<\/strong> type creates a gradient between the two colors along a straight line, whereas the Radial<\/strong> type starts from the center and moves to the borders.<\/p>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nDuotone filter<\/h3>\n\n\n\nYou can create a two-tone color effect (called the duotone effect) on images without actually changing the original image<\/p>\n\n\n\nThe duotone filter option allows you to add this filter color to your block content from the block toolbar. The filter can be black, white, or\u00a0any<\/em>\u00a0other color combination of your choosing. The duotone effect works best on high-contrast images.\u00a0<\/p>\n\n\n\nTo get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\nYou can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
A slider will appear that shows the two color points that make up the gradient. <\/p>\n\n\n\n<\/figure>\n\n\n\nYou can click on any of the two color points to display the color picker for changing the color value. You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values.<\/p>\n\n\n\nYou can add additional color points if you like by clicking the\u00a0+<\/strong>\u00a0icon that appears when you hover over the gradient slider.<\/p>\n\n\n\n\n\n<\/figure>\n<\/div>\n\n\n\n\n<\/p>\n\n\n\nYou can choose between the Linear<\/strong> or Radial<\/strong> gradient type. The angle control shifts the position of the gradient.<\/p>\n\n\n\nThe Linear<\/strong> type creates a gradient between the two colors along a straight line, whereas the Radial<\/strong> type starts from the center and moves to the borders.<\/p>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nDuotone filter<\/h3>\n\n\n\nYou can create a two-tone color effect (called the duotone effect) on images without actually changing the original image<\/p>\n\n\n\nThe duotone filter option allows you to add this filter color to your block content from the block toolbar. The filter can be black, white, or\u00a0any<\/em>\u00a0other color combination of your choosing. The duotone effect works best on high-contrast images.\u00a0<\/p>\n\n\n\nTo get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\nYou can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
You can click on any of the two color points to display the color picker for changing the color value. You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values.<\/p>\n\n\n\n
You can add additional color points if you like by clicking the\u00a0+<\/strong>\u00a0icon that appears when you hover over the gradient slider.<\/p>\n\n\n\n\n\n<\/figure>\n<\/div>\n\n\n\n\n<\/p>\n\n\n\nYou can choose between the Linear<\/strong> or Radial<\/strong> gradient type. The angle control shifts the position of the gradient.<\/p>\n\n\n\nThe Linear<\/strong> type creates a gradient between the two colors along a straight line, whereas the Radial<\/strong> type starts from the center and moves to the borders.<\/p>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nDuotone filter<\/h3>\n\n\n\nYou can create a two-tone color effect (called the duotone effect) on images without actually changing the original image<\/p>\n\n\n\nThe duotone filter option allows you to add this filter color to your block content from the block toolbar. The filter can be black, white, or\u00a0any<\/em>\u00a0other color combination of your choosing. The duotone effect works best on high-contrast images.\u00a0<\/p>\n\n\n\nTo get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\nYou can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n\n\n\n
You can choose between the Linear<\/strong> or Radial<\/strong> gradient type. The angle control shifts the position of the gradient.<\/p>\n\n\n\nThe Linear<\/strong> type creates a gradient between the two colors along a straight line, whereas the Radial<\/strong> type starts from the center and moves to the borders.<\/p>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nDuotone filter<\/h3>\n\n\n\nYou can create a two-tone color effect (called the duotone effect) on images without actually changing the original image<\/p>\n\n\n\nThe duotone filter option allows you to add this filter color to your block content from the block toolbar. The filter can be black, white, or\u00a0any<\/em>\u00a0other color combination of your choosing. The duotone effect works best on high-contrast images.\u00a0<\/p>\n\n\n\nTo get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\nYou can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The Linear<\/strong> type creates a gradient between the two colors along a straight line, whereas the Radial<\/strong> type starts from the center and moves to the borders.<\/p>\n\n\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n\nDuotone filter<\/h3>\n\n\n\nYou can create a two-tone color effect (called the duotone effect) on images without actually changing the original image<\/p>\n\n\n\nThe duotone filter option allows you to add this filter color to your block content from the block toolbar. The filter can be black, white, or\u00a0any<\/em>\u00a0other color combination of your choosing. The duotone effect works best on high-contrast images.\u00a0<\/p>\n\n\n\nTo get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\nYou can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
You can create a two-tone color effect (called the duotone effect) on images without actually changing the original image<\/p>\n\n\n\n
The duotone filter option allows you to add this filter color to your block content from the block toolbar. The filter can be black, white, or\u00a0any<\/em>\u00a0other color combination of your choosing. The duotone effect works best on high-contrast images.\u00a0<\/p>\n\n\n\nTo get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\nYou can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
To get started, select the Duotone filter icon in the block toolbar. You can pick the two colors for the effect from the list of duotone presets provided in the drop-down.\u00a0<\/p>\n\n\n\n
You can also pick your own colors for the shadows and highlights by clicking on the Shadows<\/strong> \/Highlights<\/strong> option which opens up the color picker and then selecting your custom color from the color palette.\u00a0<\/p>\n\n\n\nIf you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
If you want to remove the duotone filter you can click the Clear<\/strong> button found at the bottom-right of the color palette.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nBlocks that include color settings<\/h2>\n\n\n\n\nSocial Links<\/li>\n\n\n\nGallery<\/li>\n\n\n\nCalendar<\/li>\n\n\n\nTable of Contents \u2013 not available in 6.1<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nButton<\/li>\n\n\n\nAvatar \u2013 Duotone only<\/li>\n\n\n\nCode<\/li>\n\n\n\nColumn\/Columns<\/li>\n\n\n\nComment Author Avatar \u2013 Background only<\/li>\n\n\n\nComment Author Name<\/li>\n\n\n\nComment Content<\/li>\n\n\n\nComment Date<\/li>\n\n\n\nComment Edit Link<\/li>\n\n\n\nComment Reply Link<\/li>\n\n\n\nComments<\/li>\n\n\n\nComments Pagination<\/li>\n\n\n\nComments Pagination Next<\/li>\n\n\n\nComments Pagination Previous<\/li>\n\n\n\nComments Title<\/li>\n\n\n\nCover \u2013 Duotone only<\/li>\n\n\n\nGallery \u2013 Background only<\/li>\n\n\n\nGroup<\/li>\n\n\n\nHeading<\/li>\n\n\n\nImage \u2013 Duotone only<\/li>\n\n\n\nList<\/li>\n\n\n\nMedia & Text<\/li>\n\n\n\nNavigation<\/li>\n\n\n\nParagraph<\/li>\n\n\n\nPost Author<\/li>\n\n\n\nPost Author Biography<\/li>\n\n\n\nPost Author Name<\/li>\n\n\n\nPost Comments Count<\/li>\n\n\n\nPost Comments Form<\/li>\n\n\n\nPost Comments Link<\/li>\n\n\n\nPost Date<\/li>\n\n\n\nPost Excerpt<\/li>\n\n\n\nPost Featured Image \u2013 Duotone only<\/li>\n\n\n\nPost Navigation Link<\/li>\n\n\n\nPost Terms<\/li>\n\n\n\nPost Title<\/li>\n\n\n\nPreformatted<\/li>\n\n\n\nPullquote<\/li>\n\n\n\nQuery<\/li>\n\n\n\nQuery No Results<\/li>\n\n\n\nQuery Pagination<\/li>\n\n\n\nQuery Pagination Next<\/li>\n\n\n\nQuery Pagination Numbers<\/li>\n\n\n\nQuery Pagination Previous<\/li>\n\n\n\nQuery Title<\/li>\n\n\n\nQuote<\/li>\n\n\n\nRead More<\/li>\n\n\n\nSearch<\/li>\n\n\n\nSeparator<\/li>\n\n\n\nSite Logo \u2013 Duotone only<\/li>\n\n\n\nSite Tagline<\/li>\n\n\n\nSite Title<\/li>\n\n\n\nSocial Links<\/li>\n\n\n\nTable<\/li>\n\n\n\nTable of Contents<\/li>\n\n\n\nTerm Description<\/li>\n\n\n\nVerse<\/li>\n<\/ul>\n\n\n\nDemonstration<\/h2>\n\n\n\nTo illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
To illustrate the above settings, below is an example of how to add custom colors so that the social link icons will match the branding on your site: <\/p>\n\n\n\n<\/video><\/figure>\n\n\n\n\nChangelog <\/h2>\n\n\n\n\nCreated 2022-11-01<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
You can use the color settings in your block to set the text color, background color, link color, gradient options, and duotone filters for your content.\u00a0They are designed to make it as simple as possible to update your block’s colors. The color settings are available when you use the\u00a0block editor. If you are new to […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[83,80],"class_list":["post-16075254","helphub_article","type-helphub_article","status-publish","hentry","category-block-editor","category-customization"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16075254"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions"}],"predecessor-version":[{"id":16355113,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16075254\/revisions\/16355113"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16075254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16075254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}