Title: Color Palette Block Author: lubus Published: March 29, 2018 Last modified: May 19, 2026 --- Search plugins ![](https://ps.w.org/color-palette-block/assets/banner-772x250.png?rev=3537463) ![](https://ps.w.org/color-palette-block/assets/icon-256x256.png?rev=3537463) # Color Palette Block By [lubus](https://profiles.wordpress.org/lubus/) [Download](https://downloads.wordpress.org/plugin/color-palette-block.2.0.0.zip) [Live Preview](https://wordpress.org/plugins/color-palette-block/?preview=1) * [Details](https://wordpress.org/plugins/color-palette-block/#description) * [Reviews](https://wordpress.org/plugins/color-palette-block/#reviews) * [Installation](https://wordpress.org/plugins/color-palette-block/#installation) * [Development](https://wordpress.org/plugins/color-palette-block/#developers) [Support](https://wordpress.org/support/plugin/color-palette-block/) ## Description Color Palette Block helps you create and showcase curated color collections directly in the WordPress block editor. It is ideal for design systems, brand documentation, UI references, and visual style guides. With Color Palette Block, you can add multiple swatches, switch between unique display styles, and copy each color in common code formats for development and handoff. ### Key Features * **Multiple display styles** – Choose from **Square**, **Polaroid**, **Circle**, and **Droplet** swatch presentations. * **Flexible color code output** – Copy color values in **HEX**, **RGB**, **HSL**, and **CSS variable** formats. * **Zero Dependencies** No jQuery or heavy JS frameworks powered by the **Interactivity API**. * **Theme color integration** – Pull colors directly from your active theme palette. * **Random palette generation** – Quickly generate swatches and auto-suggest names. * **Responsive by Default** – Palettes adapt cleanly across desktop and mobile. ### Why Choose BlaBlaBlocks Color Palette Block? Because color decisions need to be both visual and usable. Color Palette Block makes it easy to present colors clearly for designers, clients, and developers while keeping everything inside the native Gutenberg workflow. * No shortcodes or custom HTML required. * Editor-first workflow with instant visual feedback. * Great for brand kits, style guides, and component libraries. ### How It Works 1. Insert the **Color Palette** block in any post or page. 2. Add swatches manually, import from theme colors, or generate random swatches. 3. Select your preferred display style and swatch sizing. 4. Copy color values in the format you need while previewing changes instantly. ### Use Cases * Build a **brand color reference** page for teams or clients. * Publish **design system palettes** with reusable values. * Share **developer-ready color specs** with copyable code formats. * Create **inspiration boards** with quick random generation. ### Available Display Styles #### 1. Square Classic rectangular swatches for clean, structured palette layouts. #### 2. Polaroid Card-style swatches with a framed visual treatment. #### 3. Circle Rounded swatches for compact, modern palette presentations. #### 4. Droplet Teardrop-inspired swatches for a more expressive visual style. ### Customization Options * Swatch display style * Swatch sizing controls * Theme color import * Random palette generation * Auto-generated swatch naming * Per-swatch code copy in multiple formats ### Performance & Optimization * Designed for the block editor workflow with straightforward controls. * Keeps palette management simple for both content creators and developers. * Responsive output helps maintain consistent presentation across devices. ### Open Source and Free BlaBlaBlocks Color Palette Block is open source and free to use. Contributions and feedback are welcome. * **Source Code:** [https://github.com/lubusIN/color-palette-block](https://github.com/lubusIN/color-palette-block) * **Report Issues:** [https://github.com/lubusIN/color-palette-block/issues](https://github.com/lubusIN/color-palette-block/issues) * **Changelog:** [https://github.com/lubusIN/color-palette-block/blob/master/CHANGELOG.md](https://github.com/lubusIN/color-palette-block/blob/master/CHANGELOG.md) ## Screenshots [⌊Add and manage color swatches in the editor.⌉⌊Add and manage color swatches in the editor.⌉[ Add and manage color swatches in the editor. [⌊Switch between Square, Polaroid, Circle, and Droplet display styles.⌉⌊Switch between Square, Polaroid, Circle, and Droplet display styles.⌉[ Switch between Square, Polaroid, Circle, and Droplet display styles. [⌊Copy color values in HEX, RGB, HSL, or CSS variable format.⌉⌊Copy color values in HEX, RGB, HSL, or CSS variable format.⌉[ Copy color values in HEX, RGB, HSL, or CSS variable format. ## Blocks This plugin provides 1 block. * Color Palette Build and share beautiful color palettes with multiple display styles and easy color code copying. ## Installation You can install this plugin either automatically through the WordPress admin or manually via upload/FTP. #### Automatic 1. Log in to your WordPress dashboard. 2. Navigate to Plugins > Add New. 3. Search for “BlaBlaBlocks Color Palette Block”, then click Install Now. 4. Activate the plugin. #### Manual 1. Download the plugin ZIP from WordPress.org or GitHub. 2. Upload the `color-palette-block` folder to `/wp-content/plugins/`. 3. Go to Plugins in wp-admin and activate **BlaBlaBlocks Color Palette Block**. ## FAQ ### 1. How do I add colors to my palette? You can add colors in several ways: * Click the “Add Color” button in the block toolbar. * Use the + button in the swatch list/grid. * Import theme colors using the “Theme Colors” option. * Generate random swatches using “Surprise Me”. ### 2. What color formats can I copy? You can copy colors in HEX (`#ffffff`), RGB (`rgb(255,255,255)`), HSL (`hsl(0,0%, 100%)`), and CSS variable (`--color-name`) formats. ### 3. Can I change how the colors are displayed? Yes. You can choose from four display styles: * Square (default) * Polaroid * Circle* Droplet ### 4. Are color names automatically generated? Yes. New swatches can receive auto-generated names based on color values, and you can edit them anytime. ### 5. Is the block responsive? Yes. The palette layout is responsive and adapts to different screen sizes. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Color Palette Block” is open source software. The following people have contributed to this plugin. Contributors * [ lubus ](https://profiles.wordpress.org/lubus/) * [ Ajit Bohra ](https://profiles.wordpress.org/ajitbohra/) * [ Punit Verma ](https://profiles.wordpress.org/punitv342/) [Translate “Color Palette Block” into your language.](https://translate.wordpress.org/projects/wp-plugins/color-palette-block) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/color-palette-block/), check out the [SVN repository](https://plugins.svn.wordpress.org/color-palette-block/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/color-palette-block/) by [RSS](https://plugins.trac.wordpress.org/log/color-palette-block/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 2.0.0 * Multiple display styles (Square, Polaroid, Circle, Droplet). * Color code copying in multiple formats (HEX, RGB, HSL, CSS variable). * Theme color integration. * Random palette generation with auto-generated color names. * Responsive design improvements. * Interactive color picker and sizing options. #### 1.1.0 * Compatibility with Gutenberg 3.1.x. * ES import for WordPress dependencies. * Minor UI tweaks. #### 1.0.0 * Initial plugin release. ## Meta * Version **2.0.0** * Last updated **2 months ago** * Active installations **10+** * WordPress version ** 6.6 or higher ** * Tested up to **7.0.2** * PHP version ** 7.4 or higher ** * Tags * [block](https://wordpress.org/plugins/tags/block/)[color](https://wordpress.org/plugins/tags/color/) [design system](https://wordpress.org/plugins/tags/design-system/)[gutenberg](https://wordpress.org/plugins/tags/gutenberg/) [palette](https://wordpress.org/plugins/tags/palette/) * [Advanced View](https://wordpress.org/plugins/color-palette-block/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/color-palette-block/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/color-palette-block/reviews/) ## Contributors * [ lubus ](https://profiles.wordpress.org/lubus/) * [ Ajit Bohra ](https://profiles.wordpress.org/ajitbohra/) * [ Punit Verma ](https://profiles.wordpress.org/punitv342/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/color-palette-block/)