HEX to RGBA Converter

Paste any HEX, RGB(A), HSL(A), or OKLCH color and instantly get every other format, including the alpha (transparency) channel.

Live HEX ↔ RGBA ↔ HSLA ↔ OKLCH Converter

Type or paste a color in any supported format, drag the alpha slider to add transparency, and copy the result straight into your CSS, Tailwind config, or design tool. Everything runs locally in your browser - nothing is sent to a server.

Quick answer: to convert HEX to RGBA, split the hex string into red, green, and blue channel pairs, convert each pair from base-16 to base-10, and append an alpha value between 0 and 1 - e.g. #4ADE80 becomes rgba(74, 222, 128, 1). This tool does that conversion (and more) for you automatically.

Color (HEX, RGB, RGBA, HSL, HSLA, or OKLCH)

Alpha (Transparency)100%

Preview

rgba(74, 222, 128, 1)

Output

HEX

#4ade80

HEX8 (with alpha)

#4ade80ff

RGB

rgb(74, 222, 128)

RGBA

rgba(74, 222, 128, 1)

HSL

hsl(141.89, 69.16%, 58.04%)

HSLA

hsla(142, 69%, 58%, 1)

OKLCH

oklch(0.800 0.182 152)

Related Developer Tools

Color Picker OKLCH Color Picker Color Mixer Color Shades Generator Tailwind Color Converter Contrast Checker

Last updated: Jun 11 2026

Reviewed by QuickTooly Team

Color Format Conversion Guide

Why Convert HEX to RGBA?

HEX colors are compact and easy to share, but they can't express transparency on their own (without a 4th/8th-digit alpha pair, which many tools and older browsers don't support). CSS properties like background-color, box-shadow, and border-color often need an alpha channel for overlays, hover states, or glassmorphism effects - rgba(), hsla(), and oklch() with / alpha all make that explicit.

Bidirectional: Paste any HEX, RGB(A), HSL(A), or OKLCH value and get all the others instantly.
Alpha-aware: Adjust transparency with a slider and see it reflected in HEX8, RGBA, HSLA, and OKLCH output.
Live preview: A checkerboard preview swatch shows exactly how the color will look against any background.
One-click copy: Copy any output format directly into your CSS or design tool.
Zero install: Works entirely in your browser - no extensions, plugins, or sign-up required.

Understanding Color Formats

Each format represents the same color in a different way. The table below summarizes how each one encodes color and transparency.

Format	Example	Alpha Support
HEX	`#4ADE80`	No (6 digits)
HEX8	`#4ADE80FF`	Yes (last 2 digits, 00-FF)
RGB	`rgb(74, 222, 128)`	No
RGBA	`rgba(74, 222, 128, 1)`	Yes (0-1)
HSL	`hsl(141, 71%, 58%)`	No
HSLA	`hsla(141, 71%, 58%, 1)`	Yes (0-1)
OKLCH	`oklch(0.866 0.196 142 / 1)`	Yes (after `/`)

What Is the Alpha Channel?

The alpha channel controls a color's opacity, from fully transparent (0) to fully opaque (1). In rgba() and hsla() it's a decimal between 0 and 1 (or a percentage). In an 8-digit hex value, it's the final two characters - a hexadecimal value from 00 (transparent) to FF (opaque). Use the alpha slider in this tool to see exactly how each format encodes the same transparency level. If you're layering a translucent color over text, check the result with our Contrast Checker to make sure it stays readable.

When to Use HEX, RGBA, HSL, or OKLCH in CSS

All four formats can describe the exact same color, but each fits different situations better.

HEX - best for static design tokens, brand colors, and anywhere you copy a value from a design tool like Figma. Compact and universally supported, but can't express transparency on its own.
RGBA - best when you need transparency for overlays, shadows, or hover states and want the syntax to stay close to plain RGB.
HSL/HSLA - best when you want to programmatically tweak a color's lightness or saturation (e.g. generating hover or disabled states) without changing its hue.
OKLCH - best for building perceptually uniform color scales and palettes, since equal changes in L look equally bright across hues. It's the format Tailwind CSS v4 uses for its default palette.

How to Use This Converter

Paste a color - type or paste a HEX, RGB(A), HSL(A), or OKLCH value into the input field, or use the native color picker. Need to find a color first? Try our Color Picker.
Adjust alpha - drag the slider to set transparency from 0% to 100%.
Check the preview - the checkerboard swatch shows how the color looks with transparency applied.
Copy any format - click Copy next to HEX, HEX8, RGB, RGBA, HSL, HSLA, or OKLCH to use it in your CSS.

Frequently Asked Questions

What's the difference between HEX and HEX8?

A standard HEX color has 6 digits (red, green, blue). HEX8 adds two more digits at the end for the alpha channel, ranging from 00 (fully transparent) to FF (fully opaque). HEX8 is supported in all modern browsers.

How do I convert HEX to RGBA manually?

Split the 6-digit hex into three pairs (red, green, blue) and convert each pair from base-16 to base-10. Then write rgba(red, green, blue, alpha) with an alpha value between 0 and 1. For example, #4ADE80 converts to rgba(74, 222, 128, 1).

Is OKLCH supported in browsers?

Yes, all modern browsers (Chrome, Firefox, Safari, Edge) support oklch() as a CSS color value. It's also the color space Tailwind CSS v4 uses internally for its default palette.

How does alpha map between formats?

Alpha is a value from 0 (transparent) to 1 (opaque). In rgba()/hsla()/oklch() it's written directly as a decimal (or percentage), while in HEX8 it's converted to a two-digit hexadecimal value (0-255 range). 50% alpha is 0.5 in RGBA/HSLA/OKLCH and 80 in HEX8.

Is this data sent to any server?

No. All parsing and conversion happens locally in your browser using the open-source culori library. Nothing is transmitted to any server.

Can I paste a color with alpha already included?

Yes. If you paste a value like rgba(74, 222, 128, 0.5) or an 8-digit hex, the alpha slider automatically updates to match, and every other output format reflects that same transparency.

How do I convert RGBA back to HEX?

Convert the red, green, and blue values from base-10 to base-16 to get the 6-digit HEX color, then drop the alpha value entirely - HEX itself can't store transparency. If you need to keep the transparency, convert the alpha (0-1) to a 0-255 range and append it as two extra hex digits to get HEX8 instead. For example, rgba(74, 222, 128, 0.5) becomes #4ADE80 (HEX) or #4ADE8080 (HEX8). Just paste the RGBA value into this tool and read off the HEX or HEX8 output.