What is the difference between hex and rgba?

A hex colour like #3b82f6 encodes red, green and blue as two hexadecimal digits each (00–ff = 0–255). The rgba() CSS function expresses the same channels as decimal integers plus a fourth alpha channel from 0 (fully transparent) to 1 (fully opaque). rgba(59, 130, 246, 1) and #3b82f6 describe the same fully opaque colour; rgba(59, 130, 246, 0.5) adds 50% transparency, which has no direct 6-digit hex equivalent — you need an 8-digit hex (#3b82f680) instead.

What is an 8-digit hex colour?

CSS Color Level 4 extended the classic 6-digit hex format with two extra digits for the alpha channel, giving #rrggbbaa. The last two hex digits map linearly onto alpha 0–255, so ff = fully opaque and 80 = roughly 50% transparent. Browser support is universal in modern browsers. This converter generates the 8-digit form automatically from your slider value.

How do I convert hex to rgba manually?

Split the 6-digit hex into three pairs and convert each from base-16 to base-10: R = parseInt("3b", 16) = 59, G = parseInt("82", 16) = 130, B = parseInt("f6", 16) = 246. The alpha is your desired opacity as a 0–1 decimal. For #3b82f6 at 80% opacity the result is rgba(59, 130, 246, 0.8). Shorthand (#rgb) expands first — each digit is doubled, so #3bf becomes #33bbff.

How is WCAG contrast calculated?

WCAG 2.1 defines relative luminance L = 0.2126 R_lin + 0.7152 G_lin + 0.0722 B_lin, where each channel is first linearised from the sRGB gamma curve (values above 0.04045 use the formula ((v + 0.055) / 1.055) ^ 2.4). The contrast ratio between two colours is then (L_lighter + 0.05) / (L_darker + 0.05). AA compliance for normal body text requires a ratio of at least 4.5:1; AAA requires 7:1; large text (18 pt or 14 pt bold) needs 3:1 for AA.

Does the opacity slider change my original hex?

No. The slider overrides the alpha component for every output format but does not rewrite the hex input field. If you type an 8-digit hex (#rrggbbaa), the slider initialises to the embedded alpha and you can fine-tune from there. Editing the hex field again will re-sync the slider.

How do CSS custom properties (variables) work for colours?

The CSS variable output — for example --color: rgba(59, 130, 246, 0.8); — is a declaration you paste inside a :root {} block or a component selector. You then reference it with var(--color) anywhere in your stylesheet. Custom properties are fully dynamic: changing the value once updates every usage site across your page.

Hex to RGBA Converter

A Hex to RGBA Converter that translates any hexadecimal colour code into every CSS colour format you might need — rgba(), rgb(), hsl(), hsla(), an 8-digit hex, a CSS custom property and a Tailwind utility class — and displays the WCAG accessibility contrast ratio against white and black. It accepts 3-digit, 4-digit (with alpha), 6-digit and 8-digit hex values, and lets you override the alpha channel with a smooth opacity slider. Everything runs in your browser; no colour data ever leaves your machine.

How it works

Hex colours encode three colour channels — red, green and blue — as pairs of base-16 digits. Each pair maps onto an integer from 0 to 255. Converting to RGBA is straightforward:

Expand shorthand. A 3-digit #rgb becomes #rrggbb by doubling each digit (so #3bf expands to #33bbff). A 4-digit #rgba expands similarly to 8 digits.
Parse channels. Split the 6-digit form into three 2-character slices and convert each with parseInt(slice, 16):
#3b82f6 → R = 59, G = 130, B = 246.
Map alpha. The slider expresses opacity as 0–100%. Divide by 100 to get the CSS alpha value (0–1). For 8-digit hex, the last two hex digits give a 0–255 integer which is divided by 255.
Build output strings. rgba(59, 130, 246, 0.8), hsl(217, 91%, 60%), #3b82f6cc, and so on, are assembled from the same four numbers.

The WCAG contrast ratio uses the full sRGB linearisation formula: channels below 0.04045 are divided by 12.92; those above use ((v + 0.055) / 1.055) ^ 2.4. Luminance is the dot product 0.2126 R + 0.7152 G + 0.0722 B. The final ratio is (L_lighter + 0.05) / (L_darker + 0.05).

Worked example

Start with Tailwind’s blue-500: #3b82f6 at 80% opacity.

Channel	Hex pair	Decimal
Red	3b	59
Green	82	130
Blue	f6	246
Alpha	80% → cc	204/255 ≈ 0.80

Outputs:

RGBA: rgba(59, 130, 246, 0.8)
8-digit hex: #3b82f6cc
HSLA: hsla(217, 91%, 60%, 0.8)
CSS variable: --color: rgba(59, 130, 246, 0.8);
Tailwind: bg-[#3b82f6] bg-opacity-80

Contrast at 100% opacity against white: 3.68:1 (AA Large pass); against black: 5.71:1 (AA pass).

Formula note

The alpha conversion is linear: alpha = a_255 / 255. The 8-digit hex alpha byte is the reverse: a_255 = Math.round(alpha_0_to_1 * 255), then encoded as two hex digits padded to at least two characters. Shorthand #rgba follows the same doubling rule as #rgb — the digit 8 in #3b8f becomes 88 in the alpha channel, not 08.