HEX to RGBA Converter (With Opacity & 8-Digit Alpha)
Convert any HEX color (#RGB, #RRGGBB, or 8-digit #RRGGBBAA) into CSS RGBA values and modern CSS Level 4 syntax in real time. Features an interactive opacity slider, split checkerboard transparency preview, and ready-to-copy code snippets for CSS, Swift, and Flutter.
HEX Code & Opacity
#FFF, #F00A, #3B82F6, #3B82F6D9).
Converted Code Snippets
1-Click CopyAlpha Transparency to 2-Digit Hex Reference Table
When working with 8-digit hexadecimal colors (#RRGGBBAA), the final two characters represent the alpha transparency byte (from 00 for 0% opacity to FF for 100% opacity). Click any row to test that opacity in the converter above.
| Opacity (%) | Decimal (0.0 - 1.0) | 2-Digit Alpha HEX | 8-Digit Blue Example | Action |
|---|---|---|---|---|
| 100% | 1.00 | FF |
#3B82F6FF |
|
| 95% | 0.95 | F2 |
#3B82F6F2 |
|
| 90% | 0.90 | E6 |
#3B82F6E6 |
|
| 85% | 0.85 | D9 |
#3B82F6D9 |
|
| 80% | 0.80 | CC |
#3B82F6CC |
|
| 75% | 0.75 | BF |
#3B82F6BF |
|
| 70% | 0.70 | B3 |
#3B82F6B3 |
|
| 60% | 0.60 | 99 |
#3B82F699 |
|
| 50% | 0.50 | 80 |
#3B82F680 |
|
| 40% | 0.40 | 66 |
#3B82F666 |
|
| 30% | 0.30 | 4D |
#3B82F64D |
|
| 25% | 0.25 | 40 |
#3B82F640 |
|
| 20% | 0.20 | 33 |
#3B82F633 |
|
| 10% | 0.10 | 1A |
#3B82F61A |
|
| 5% | 0.05 | 0D |
#3B82F60D |
|
| 0% | 0.00 | 00 |
#3B82F600 |
How HEX to RGBA Conversion Works
1. Parsing Hexadecimal Base Pairs
A standard 6-digit hexadecimal color string consists of three base-16 number pairs: #RRGGBB. Each pair ranges from 00 (0 in base 10) to FF (255 in base 10). To compute the RGB channels:
R = parseInt("3B", 16) = (3 × 16) + 11 = 59G = parseInt("82", 16) = (8 × 16) + 2 = 130B = parseInt("F6", 16) = (15 × 16) + 6 = 246
2. Calculating Alpha Transparency
In CSS, alpha transparency is specified as a floating point decimal between 0.0 (fully transparent) and 1.0 (fully opaque). When given an 8-digit hex code such as #3B82F6D9, the last byte D9 represents the alpha channel:
parseInt("D9", 16) = (13 × 16) + 9 = 217Alpha Decimal = 217 / 255 = 0.8509 ≈ 0.85Alpha Percentage = 85%
Modern CSS Syntax: rgb(r g b / alpha) vs rgba()
Historically, web developers had to switch from rgb(r, g, b) to rgba(r, g, b, a) whenever an opacity channel was needed. Under the CSS Color Module Level 4 specification, modern browsers have unified color syntax:
/* Legacy CSS Syntax */
background-color: rgba(59, 130, 246, 0.85);
/* Modern CSS Level 4 Syntax (Recommended) */
background-color: rgb(59 130 246 / 85%);
background-color: rgb(59 130 246 / 0.85);
The modern space-separated format with a slash / for opacity supports percentage values directly (e.g. / 85%) or decimal values (e.g. / 0.85), and is universally supported across Chrome, Safari, Firefox, Edge, and iOS WebKit.
Critical Developer Warning: ARGB vs RGBA Byte Ordering
While CSS and the web use RGBA (Alpha is at the end: #RRGGBBAA), mobile app frameworks like Flutter and Android Java/Kotlin use ARGB (Alpha is at the front: 0xAARRGGBB). For example, 85% opacity blue is #3B82F6D9 in CSS, but must be written as Color(0xD93B82F6) in Flutter. Our converter automatically handles this transposition for you!
Frequently Asked Questions
Can I convert 3-digit and 4-digit shorthand hex codes?
Yes! Pikka's engine automatically expands 3-digit shorthand like #FFF into #FFFFFF (rgb 255, 255, 255). It also supports 4-digit shorthand with alpha like #F008, expanding it into #FF000088.
Is 8-digit HEX supported in all modern web browsers?
Yes. 8-digit hex color notation (#RRGGBBAA) is fully supported in Chrome (version 62+), Safari (version 10+), Firefox (version 52+), Edge, and iOS Safari. It is safe for all modern production websites and design systems.
How does alpha transparency differ from CSS opacity?
Applying opacity: 0.8 to a parent HTML element forces all child text, images, and nested elements to become 80% transparent as well. Using rgba() or #RRGGBBAA on background-color allows the background to be transparent while keeping your foreground text and icons 100% crisp, sharp, and accessible.
Are any color values uploaded to an external server?
Never. Pikka runs 100% client-side in your local browser using pure JavaScript mathematics. Your design tokens, colors, and queries never leave your machine.