Free tools
HEX to HSLA converter
Type or paste a colour, for example #4353ff, rgb(67 83 255 / .5) or a CSS colour list. The tool shows the HSLA value that Webflow stores. The tool also shows the RGB value and the HEX value.
| Input | Webflow HSLA | RGB | HEX | |
|---|---|---|---|---|
#4353ff | ||||
rgb(15 23 42 / 0.8) | ||||
#16a34a80 |
Click any value to copy it.
How to use it
- Type or paste 1 colour on each line.
- Copy the HSLA value that you need.
Why HSLA?
Webflow stores colours as hsla(H, S%, L%, A) with 2 decimals. If you use the same format, you can match swatches and variables exactly.
Convert many colours at the same time
Paste a full palette, with 1 colour on each line. The tool converts all lines at the same time.
Questions
Does this send my colours anywhere?
No. The tool runs fully in your browser.
Can it read 8-digit hex with alpha?
Yes. The tool converts #RRGGBBAA and #RGBA values with their alpha.
More free tools
HTML to Webflow converterConvert HTML and CSS to native Webflow elements on your clipboard.Tailwind to CSSConvert Tailwind classes to plain CSS with the real Tailwind compiler.PX to REMConvert pixels to rem and rem to pixels with your root font size.Fluid clamp() generatorMake a CSS clamp() value that scales smoothly between 2 screen widths.