This WordPress plugin adds a Color Palette block to the post editor, to be used for branding and style guide pages.
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're done!
If you are feeling a bit uninspired about color names, the Color block will automatically generate one for you. (Don't worry. You can always change the name to something different.) Thank you to the Name That Color library for that functionality.
Each color in the palette will display a swatch of the selected color, the color name, as well as the Hex, RGB, and CMYK values for that color.
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.
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.
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.
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.