Style guides
Show a brand colour in every format teams need.
Content / widget · Elementor module
CSS Colour Format Converter Widget Plugin for Elementor
Let visitors type any CSS colour and get it as HEX, RGB, HSL and OKLCH with a swatch and a copy button for each, live in the browser.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / CSS colour format converterProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
Try it
These are the actual published widgets running in your browser; type any colour to convert it.
02 / Inside WordPress
CSS colour format converter controls in Elementor
Conversion sets live or button conversion, the formats shown, comma syntax, upper-case HEX and the swatch. Labels sets the heading, the field label, starting colour and hint, and every button and message. The Style tab covers the layout, the field, the format rows, the swatch and the buttons.
03 / Website use cases
Where to use css colour format converter
Designers and developers juggle colours in different notations: a hex code from a brand guide, rgb() in old CSS, hsl() for adjustments and oklch() in modern stylesheets. CSS colour format converter reads whichever one is pasted and gives all four, with a swatch to confirm the colour and one click to copy each.
Front-end work
Turn hex codes into oklch() for modern CSS.
Design handoff
Let clients paste a colour and copy the code their developer asked for.
04 / Installation and setup
How to add a colour converter in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Complementor, connect your license and enable CSS colour format converter in the Complementor library.
Add the widget to a design resources or style guide page.
Choose the formats to show and whether to use comma syntax.
Optionally set a starting colour, such as your brand colour.
Style the rows and swatch, then type a few colours to check.
05 / Content and style controls
Customize css colour format converter in Elementor
Configure the settings available for this module to suit the page you are building.
Reads #hex (3, 4, 6 or 8 digits), rgb(), rgba(), hsl(), hsla(), hwb() and transparent.
Colour names such as royalblue and other CSS colours through the browser.
Outputs HEX, RGB, HSL and OKLCH, each with its own copy button.
Transparency kept in every format, shown on a checkerboard swatch.
Modern space syntax or older comma syntax.
Upper- or lower-case HEX.
A clear message when a colour cannot be read.
06 / Choose the right approach
CSS colour format converter and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
Colour contrast checker
Checks whether two colours are readable together.
Browser developer tools
Convert colours too, but need technical know-how; this widget works on any page.
07 / Requirements and compatibility
CSS colour format converter compatibility with Elementor
- Requires Elementor.
- sRGB colours; wide-gamut colours are mapped to sRGB by the browser.
- Runs in the visitor’s browser.
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot css colour format converter
Check these settings if the published page behaves differently from the editor.
Why is my colour not read?
Check the brackets and separators, such as rgb(29 78 216) or rgb(29, 78, 216), or use a hex code. The message shows what was typed.
Why does HSL show decimals?
Converting from RGB rarely lands on whole numbers; the decimals keep the exact colour.
Why does the hex code have eight digits?
The colour is partly transparent; the last two digits are the alpha.
Why do values over 255 change?
They are outside the colour range and are clipped, as browsers do.
CSS colour format converter plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor.
Is anything sent to a server?
No. The conversion runs in the visitor’s browser.
What is OKLCH?
A modern CSS colour format whose lightness matches how people see it, useful for building palettes.
Can I hide some formats?
Yes. Choose the formats shown in the widget settings.
Does it read colour names?
Yes. Names such as rebeccapurple are read by the visitor’s browser.
10 / Annual All Access subscription
Get css colour format converter with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.