About the Hex to RGBA
Overlays, scrims, focus rings and hover states are nearly always a brand colour at partial opacity, and a plain HEX code cannot express that. Set the alpha in the toolbar, paste your codes into the pane, and each one returns as an rgba() value carrying that opacity. The alpha field takes a decimal such as 0.6, and a whole number such as 60 is read as a percentage.
A code that already carries transparency keeps it. Eight digit codes like #17181c80, and their four digit shorthand, hold the alpha in the final pair of digits, and that channel wins over the toolbar setting so an existing value is never overwritten. Codes without an alpha channel take whatever the toolbar says.
The notation option switches between the comma separated form that every browser has supported for years and the space separated rgb(31 193 107 / 60%) syntax from CSS Color 4. The modern form is what browsers print in devtools today and is what colour mixing functions expect, but the legacy form is safer in email templates and older build pipelines. To strip an alpha back into a code, use RGB to HEX, which writes the eight digit form when opacity is below 1.
How to use
- Set the Alpha value in the toolbar, from 0 to 1.
- Paste HEX codes, one per line.
- Pick legacy or modern notation.
- Press Convert and copy the rgba() values.
Common questions
- What if my code already has an alpha channel?
- The alpha built into an 8-digit or 4-digit code takes priority and the toolbar value is skipped for that line.
- Can I type the alpha as a percentage?
- Yes, a value above 1, such as 60, is treated as 60 percent.
- Which notation should I choose?
- Modern space separated syntax for current CSS, legacy comma syntax for email templates and older tooling.
- Does shorthand like #1fc work?
- Yes, three and four digit codes are expanded before conversion.