HEX to RGBA Converter
Convert HEX color codes to RGBA format with transparency support. RGBA extends RGB by adding an alpha channel for controlling opacity, essential for overlays, shadows, and transparent design elements.
Understanding RGBA
RGBA adds a fourth value to RGB—the alpha channel:
- R: Red (0-255)
- G: Green (0-255)
- B: Blue (0-255)
- A: Alpha/Opacity (0-1 or 0%-100%)
HEX to RGBA Conversion
Standard 6-character HEX (#RRGGBB) converts to RGB with alpha manually specified:
| HEX | RGBA (50% transparent) |
|---|---|
| #FF0000 | rgba(255, 0, 0, 0.5) |
| #0000FF | rgba(0, 0, 255, 0.5) |
| #333333 | rgba(51, 51, 51, 0.5) |
| 8-Digit HEX | RGBA |
|---|---|
| #FF000080 | rgba(255, 0, 0, 0.5) |
| #0000FF40 | rgba(0, 0, 255, 0.25) |
| #00FF00FF | rgba(0, 255, 0, 1) |
Common RGBA Use Cases
| Use Case | Example |
|---|---|
| Modal overlay | rgba(0, 0, 0, 0.5) |
| Button hover | rgba(255, 255, 255, 0.1) |
| Text shadow | rgba(0, 0, 0, 0.3) |
| Glass effect | rgba(255, 255, 255, 0.2) |
CSS RGBA Syntax
``css
.overlay {
background-color: rgba(0, 0, 0, 0.7);
}
.glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
}
`
Use this converter to add transparency to your HEX colors for modern UI designs.
HEX and RGBA
| HEX | RGBA | |
|---|---|---|
| Syntax | #RRGGBB, or #RGB shorthand, or #RRGGBBAA with alpha | rgba(255, 99, 71, 0.5), or rgb(255 99 71 / 50%) in modern CSS |
| Channels | red, green, blue — each 0–255 written as two hex digits | red, green, blue plus alpha from 0 (transparent) to 1 (opaque) |
| Precision | 8 bits per channel, 16.7 million colours | 8 bits per colour channel; alpha is a float |
| Support | Universal. The 8-digit alpha form needs a 2020-or-later browser. | Universal. |
| Best for | Design handoff, CSS, anywhere a colour is written as a single token. | Overlays, shadows, disabled states — anywhere the colour must let the layer below through. |
A Worked Example
Taking CSS tomato through every format:
| Format | Value |
|---|---|
| HEX | #FF6347 |
| RGB | rgb(255, 99, 71) |
| RGBA | rgba(255, 99, 71, 0.5) |
| HSL | hsl(9, 100%, 64%) |
| HSB | hsb(9, 72%, 100%) |
| CMYK | cmyk(0%, 61%, 72%, 0%) |
Doing It in Code
`javascript
// HEX to RGB
const hexToRgb = (hex) => {
const n = parseInt(hex.replace('#', ''), 16);
return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};
// RGB to HEX
const rgbToHex = (r, g, b) =>
'#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');
`
Modern CSS can do a lot of this without any conversion at all: color-mix() blends two
colours, and relative colour syntax — hsl(from var(--brand) h s calc(l + 10%))` — derives
a lighter shade without you ever computing one.