RGBA to HEX Converter

What this tool does

This converter moves a colour between two representations: the rgba() form with separate red, green, blue and alpha values, and HEX notation in both its 6-digit (#RRGGBB) and 8-digit (#RRGGBBAA) forms. You can drive it from either side. Adjust the R, G, B sliders and the alpha slider and the HEX outputs update live; or type a HEX value into the field and the sliders snap to match. A preview swatch sits over a checkerboard so the alpha channel is actually visible. Every output format has its own copy button, and the whole thing runs in your browser.

Why you might need it

Colour values travel between tools in different shapes. A design tool might give you rgba(58, 175, 255, 0.5); a stylesheet or a config file might want #3AAFFF80; an older codebase might only use 6-digit HEX and track opacity separately. Converting these by hand means doing base-16 arithmetic and remembering that alpha is a 0-to-1 fraction on one side and a 0-to-255 byte on the other. This tool removes that friction, and the two-way binding means you never have to care which direction you are converting — you just edit whichever side you have and read the other.

How to use it

1. Set the colour with the Red, Green and Blue sliders (0-255) and the Alpha slider (0-1). Each slider has a number field for exact values.
2. Or type a HEX value — #3AAFFF, #3AAFFF80, or shorthand like #3AF — into the HEX value field; the sliders follow.
3. Watch the preview swatch over the checkerboard to judge the colour and its transparency.
4. Copy whichever output you need: 8-digit HEX, 6-digit HEX, or the rgba() string.

Common pitfalls

The most common confusion is the alpha scale. In rgba() alpha is a fraction from 0 to 1; in 8-digit HEX it is a byte from 00 to FF. The conversion is not always a clean round trip — 0.5 becomes 80 in hex, but 80 in hex is 128/255, which is 0.502, not exactly 0.5. That tiny drift is expected and harmless. Also note that the 6-digit HEX output discards alpha entirely: if your colour is semi-transparent, #RRGGBB only carries the colour and the transparency is lost. Use the 8-digit form whenever the alpha matters.

Tips and advanced use

If you support older browsers or tooling that rejects 8-digit HEX, copy the rgba() string instead — it is universally understood and keeps the alpha. When you need a fully opaque colour, set alpha to 1; the 8-digit output will end in FF and the 6-digit output becomes an exact equivalent. Shorthand HEX is handy for quick entry: #3AF expands to #33AAFF, and #3AF8 expands with an alpha nibble too. Because the conversion is pure local arithmetic, you can explore colour and opacity combinations as fast as you can drag a slider, and none of it leaves your device.