HEX to RGBA Converter

A HEX to RGBA converter translates a hexadecimal colour code into the comma-separated red/green/blue/alpha format that CSS and design software understand natively. HEX is compact and common (every designer recognises #635BFF), but it does not carry transparency information by default. RGBA adds a fourth channel — alpha — so the same colour can fade in, overlap other layers, or layer on top of a photograph without replacing it.

The two formats describe the same underlying colour mathematics. Six-digit HEX encodes each of the red, green, and blue channels as a value from 00 to FF (0 to 255 in decimal). RGBA expresses the same channels in decimal and appends an alpha from 0 (fully transparent) to 1 (fully opaque). #635BFF and rgba(99, 91, 255, 1) are identical. The HEX variant with an eighth and ninth digit (#635BFF80) encodes alpha too, in the same 00–FF range. Most browsers have supported 8-digit HEX since 2017.

Developers need RGBA for any colour that should appear partially transparent — overlays, frosted panels, hover states with a subtle tint, tooltip backgrounds, scrim layers over images. Designers prefer HEX in brand guidelines because it reads cleanly and does not invite decimal math. A converter bridges the two worlds.

This tool covers more than HEX and RGBA. It also outputs HSL, HSLA, HSV, CMYK, CIE LCH, and OKLCH — the modern perceptually uniform colour space now supported natively in CSS. HSL and HSLA are useful when you want to tweak a colour along a single axis (make it lighter, shift its hue, reduce saturation); CMYK matters when you hand artwork to a printer; OKLCH is the right pick when you are generating palettes that should stay visually balanced under colour shifts, because a one-unit change in lightness looks the same across any hue.

Accessibility is part of the job too. The tool shows the WCAG contrast ratio against pure white and pure black. A ratio of 4.5 or above passes WCAG AA for normal text; 3.0 passes AA for large text (18pt or 14pt bold); 7.0 passes the stricter AAA level. If your brand colour sits below 3.0 against white, it is too light to use for body text on a white background — pick a darker shade or reserve it for decorative accents.

1. Enter a HEX value. Paste or type a 3-digit, 6-digit, or 8-digit HEX with or without the leading #. You can also use the native colour picker beside the field to explore visually.
2. Adjust the alpha channel. Drag the alpha slider from 0 (fully transparent) to 1 (fully opaque). The preview swatch updates live over a checker background so you can see the transparency.
3. Read every format. Every supported format — RGB, RGBA, HSL, HSLA, HSV, CMYK, LCH, OKLCH — is shown next to the HEX input, ready to copy.
4. Check accessibility. The contrast card shows the WCAG ratio against white and against black, along with the pass level (AA, AAA, or Fail).
5. Copy the format you need. Each row has a Copy button that places the exact CSS-ready value on your clipboard.

• Accepts 3-, 6-, or 8-digit HEX, with or without the leading hash.
• Outputs RGB, RGBA, HSL, HSLA, HSV, CMYK, CIE LCH, and OKLCH.
• Live checker-backed preview so alpha transparency is visible.
• WCAG contrast ratios against white and black with AA/AAA pass labels.
• Nearest named CSS colour for sanity-checking brand palettes.
• One-click copy for every format; nothing is sent to a server.