Developers · Gutenberg
Color Converter block for WordPress
Live Hex ↔ RGB ↔ HSL color converter with a real-time color preview swatch.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Live Hex ↔ RGB ↔ HSL color converter with a real-time color preview swatch.
Inspector panels on this block: Header, Settings, Sizing & Layout. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Developers → search “Color Converter” (block name `blockenberg/color-converter` in block.json). Style it in the sidebar after insert.
How to use Color Converter block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Color Converter”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Header. Set “Show Title”, “Show Subtitle”, “Header — Title”, “Subtitle”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Show Subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Header — Title | Text field in the inspector. block.json default: Color Converter. Saved as `title`. |
| Subtitle | Text field in the inspector. block.json default: Convert between Hex, RGB, and HSL color formats instantly.. Saved as `subtitle`. |
| Default Color (Hex) | Text field in the inspector. block.json default: #6c3fb5. Saved as `defaultHex`. |
| Show Color Swatch | On/off toggle in the inspector. On by default. Saved as `showSwatchLarge`. |
| Show Copy Buttons | On/off toggle in the inspector. On by default. Saved as `showCopyBtns`. |
| Swatch Height (px) | Numeric range control in the inspector. Range 40–300. block.json default: 120. Saved as `swatchHeight`. |
| Card Border Radius | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardRadius`. |
| Input Border Radius | Numeric range control in the inspector. Range 0–24. block.json default: 8. Saved as `inputRadius`. |
| Max Width (px) | Numeric range control in the inspector. Range 300–900. block.json default: 540. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–160. block.json default: 60. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–160. block.json default: 60. Saved as `paddingBottom`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Live Hex ↔ RGB ↔ HSL color converter with a real-time color preview swatch — that is the job of Color Converter, not a generic content block.
- Use it when you need the editor control labeled “Show Title”, which exists on this block’s inspector.
- It matches pages about color, hex, rgb.
- Inserter grouping: docs sites, utilities, and developer landing pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Color Converter block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Color Converter”. It sits under Developers. After insert, open Header and set “Show Title”, “Show Subtitle”, “Header — Title”, “Subtitle”.
What makes Color Converter different from other Blockenberg blocks?
Live Hex ↔ RGB ↔ HSL color converter with a real-time color preview swatch. Inspector labels on this block include “Show Title”, “Show Subtitle”, “Header — Title”, “Subtitle”.
Is the Color Converter Gutenberg block free?
Yes. Color Converter ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Color Converter to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Header, Settings, Sizing & Layout).
Related developers blocks
Color Mixer
Interactive color mixing tool. Pick two colors, blend them at any ratio, view the result in HEX/RGB/HSL, generate color harmonies, and copy any value instantly.
Base64 Encoder / Decoder
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy.
Color Harmony
Pick a base color and instantly see complementary, triadic, analogous, and other harmonic palettes. Click any swatch to copy its hex value.
Color Palette
Display brand color swatches with HEX, RGB, and CSS variable labels. Perfect for style guides and design systems.
Color Thief
Upload an image to automatically extract its dominant color palette using canvas pixel analysis.
Color Tokens
Design-system colour token reference. Displays named colour swatches grouped into palettes (Primary, Neutral, Semantic, etc.) with hex/RGB values. Visitors can click any swatch to copy its hex code.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Color Converter from the Gutenberg inserter.