Color Palette

Features

The Color Palette block displays a group of colors on your page. The block starts with 3 individual Color blocks, but you can add additional blocks or remove excess blocks as needed.

Give each color block a color using the selector in the Inspector Panel on the right-hand side of the editor, give your color a name, and you are done!

Each color in the palette will display a swatch of the selected color, the given color name, as well as the Hex, RGB, and CMYK values for that color (optional).

If you need to use the same color palette on multiple pages or posts, simply save the Color Palette block with all of your colors as a reusable block through the editor.

Palette color block styles

You can select the “Color block style” inside the Color Palette block by using the options in the Inspector Panel. The style options include:

• Basic card: Each color is displayed in a rectangular card with minimal additional styles. This option is the easiest to override in your theme styles.
• Stylized card: Each color is displayed in a rectangular card, just like the basic card, but with a bit more design added to it.
• Circle: Each color is displayed as a circle of color, with the name and color values centered underneath the circle of color.

Color code options

Inside the Color Palette block, you can select which color codes (Hex, RGB, or CMYK) should be hidden on the page. These options are in the Inspector Panel and apply to all color blocks inside the palette.

Search option

You can optionally include search functionality inside the Color Palette block, via an option in the Inspector Panel. If enabled, a keyword search form will appear above the color blocks inside the palette, that will allow an end-user to search for any color in the palette by name.

Reusability

If you need to use the same color palette on multiple pages or posts, simply save the Color Palette block with all of your colors as a reusable block via the post editor.