lubus

Ajit Bohra

Punit Verma

<p>Color Palette Block helps you create and showcase curated color collections directly in the WordPress block editor.<br />
It is ideal for design systems, brand documentation, UI references, and visual style guides.</p>
<p>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.</p>
<h3>Key Features</h3>
<ul>
<li><strong>Multiple display styles</strong> – Choose from <strong>Square</strong>, <strong>Polaroid</strong>, <strong>Circle</strong>, and <strong>Droplet</strong> swatch presentations.</li>
<li><strong>Flexible color code output</strong> – Copy color values in <strong>HEX</strong>, <strong>RGB</strong>, <strong>HSL</strong>, and <strong>CSS variable</strong> formats.</li>
<li><strong>Zero Dependencies</strong> No jQuery or heavy JS frameworks powered by the <strong>Interactivity API</strong>.</li>
<li><strong>Theme color integration</strong> – Pull colors directly from your active theme palette.</li>
<li><strong>Random palette generation</strong> – Quickly generate swatches and auto-suggest names.</li>
<li><strong>Responsive by Default</strong> – Palettes adapt cleanly across desktop and mobile.</li>
</ul>
<h3>Why Choose BlaBlaBlocks Color Palette Block?</h3>
<p>Because color decisions need to be both visual and usable.<br />
Color Palette Block makes it easy to present colors clearly for designers, clients, and developers while keeping everything inside the native Gutenberg workflow.</p>
<ul>
<li>No shortcodes or custom HTML required.</li>
<li>Editor-first workflow with instant visual feedback.</li>
<li>Great for brand kits, style guides, and component libraries.</li>
</ul>
<h3>How It Works</h3>
<ol>
<li>Insert the <strong>Color Palette</strong> block in any post or page.</li>
<li>Add swatches manually, import from theme colors, or generate random swatches.</li>
<li>Select your preferred display style and swatch sizing.</li>
<li>Copy color values in the format you need while previewing changes instantly.</li>
</ol>
<h3>Use Cases</h3>
<ul>
<li>Build a <strong>brand color reference</strong> page for teams or clients.</li>
<li>Publish <strong>design system palettes</strong> with reusable values.</li>
<li>Share <strong>developer-ready color specs</strong> with copyable code formats.</li>
<li>Create <strong>inspiration boards</strong> with quick random generation.</li>
</ul>
<h3>Available Display Styles</h3>
<h4>1. Square</h4>
<p>Classic rectangular swatches for clean, structured palette layouts.</p>
<h4>2. Polaroid</h4>
<p>Card-style swatches with a framed visual treatment.</p>
<h4>3. Circle</h4>
<p>Rounded swatches for compact, modern palette presentations.</p>
<h4>4. Droplet</h4>
<p>Teardrop-inspired swatches for a more expressive visual style.</p>
<h3>Customization Options</h3>
<ul>
<li>Swatch display style</li>
<li>Swatch sizing controls</li>
<li>Theme color import</li>
<li>Random palette generation</li>
<li>Auto-generated swatch naming</li>
<li>Per-swatch code copy in multiple formats</li>
</ul>
<h3>Performance & Optimization</h3>
<ul>
<li>Designed for the block editor workflow with straightforward controls.</li>
<li>Keeps palette management simple for both content creators and developers.</li>
<li>Responsive output helps maintain consistent presentation across devices.</li>
</ul>
<h3>Open Source and Free</h3>
<p>BlaBlaBlocks Color Palette Block is open source and free to use. Contributions and feedback are welcome.</p>
<ul>
<li>
<p><strong>Source Code:</strong><br />
<a href="https://github.com/lubusIN/color-palette-block" rel="nofollow ugc">https://github.com/lubusIN/color-palette-block</a></p>
</li>
<li>
<p><strong>Report Issues:</strong><br />
<a href="https://github.com/lubusIN/color-palette-block/issues" rel="nofollow ugc">https://github.com/lubusIN/color-palette-block/issues</a></p>
</li>
<li>
<p><strong>Changelog:</strong><br />
<a href="https://github.com/lubusIN/color-palette-block/blob/master/CHANGELOG.md" rel="nofollow ugc">https://github.com/lubusIN/color-palette-block/blob/master/CHANGELOG.md</a></p>
</li>
</ul>


Color Palette Block

Build and share beautiful color palettes with multiple display styles and easy color code copying.

Krishna Kant Chourasiya

Ram Ratan Maurya

JohnPixle

AnalogWP

<p>✨ Have you seen our brand new launch? <a href="https://analogwp.com/custom-library-for-elementor/?utm_medium=wp.org&utm_source=wordpressorg&utm_campaign=readme" rel="nofollow ugc">Custom Library for Elementor</a></p>
<p><a href="https://analogwp.com/style-kits/?utm_source=wporg&utm_medium=referral&utm_campaign=readme" rel="nofollow ugc">🚀 Take a better look at Style Kits</a></p>
<p><a href="https://analogwp.com/style-kits/?utm_medium=wp.org&utm_source=wordpressorg&utm_campaign=readme&utm_content=analogwp" rel="nofollow ugc">Style Kits</a> extends the flexibility of Elementor theme styles with more global design controls, and introduces the most advanced container-based pattern library and theme style presets that will jumpstart your design process in Elementor.</p>
<p>Style Kits creates the foundation for a design framework that will help you create better, more consistent websites with Elementor.</p>
<h3>Library of Theme Style Presets</h3>
<p>Get an unfair design advantage by importing read-made theme style presets for pre-configured  typography, colors, spacing and more. Give your Elementor website a completely different look in just a few clicks.</p>
<ul>
<li>Use them as a starting point, customise them or create your own.</li>
<li>Outer Section Padding</li>
<li>Override your global theme styles on specific pages, with another theme style preset</li>
<li>Import and export style presets across sites.</li>
</ul>
<h3>The most advanced Elementor Pattern library</h3>
<p>A one-of-a-kind pattern library for Elementor, powered by flexbox containers and native widgets. Skyrocket your layout-building process with a collection of mix-and-match patterns that automatically adapt to your Global theme styles.</p>
<ul>
<li>100% built with Elementor flexbox containers</li>
<li>Consistent, customisable styles across all patterns, that automatically adapt to the theme styles of your site</li>
<li>Wide collection of patterns to facilitate all your layout-building needs</li>
</ul>
<h3>More tools for global design control</h3>
<p>Manage container spacing globally, adjust button styles per size, and many more tools that will help you scale-up your layouts with consistency.</p>
<p>Style Kits for Elementor adds a set of extra UI controls to Theme Styles editor, for the most important aspects of your Elementor design system.</p>
<ul>
<li>Global Style Kit fonts</li>
<li>Global Style Kit colors</li>
<li>Containers Padding</li>
<li>Shadows</li>
<li>Background classes</li>
<li>Button Styles per size</li>
<li>Outer Section Padding</li>
<li>Column Gaps</li>
<li>Text Sizes</li>
</ul>
<h3>Boost your Elementor design workflow with Style Kits Pro</h3>
<ul>
<li><strong>Unlimited access</strong> to all container-based patterns</li>
<li><strong>Unlimited access</strong> to all theme style presets</li>
<li><strong>Unlimited access</strong> to all global design controls</li>
<li><strong>User Role</strong> management to hide Style Kits from your clients</li>
<li><strong>Cleanup tools</strong> to help you clean layouts from inline styles</li>
<li>Many more PRO features and tools to improve your workflow</li>
</ul>
<p><strong>Find us</strong>:<br />
– <a href="https://analogwp.com/?utm_medium=wp.org&utm_source=wordpressorg&utm_campaign=readme&utm_content=analogwp" rel="nofollow ugc">Visit the AnalogWP Website</a><br />
– <a href="https://twitter.com/AnalogWP/" rel="nofollow ugc">Follow on Twitter</a><br />
– <a href="https://www.facebook.com/analogwp" rel="nofollow ugc">Like us on Facebook</a><br />
– <a href="https://analogwp.com/docs/" rel="nofollow ugc">Documentation</a></p>


Style Kits for Elementor

Power-up your Elementor workflow with global theme style presets, container-based patterns, and more global design controls.

Color Palette Block vs Style Kits for Elementor