RGBA to HEX Converter
Convert RGBA colors (including transparency) to 8-digit HEX format. This converter handles the alpha channel, producing HEX codes in the #RRGGBBAA format for colors with transparency.
Understanding 8-Digit HEX
8-digit HEX extends standard HEX with alpha:
| Format | Structure | Example |
|---|---|---|
| 6-digit | #RRGGBB | #FF0000 (red) |
| 8-digit | #RRGGBBAA | #FF000080 (50% red) |
Alpha Value Conversion
| RGBA Alpha | HEX Alpha | Opacity |
|---|---|---|
| 1.0 | FF | 100% |
| 0.75 | BF | 75% |
| 0.5 | 80 | 50% |
| 0.25 | 40 | 25% |
| 0 | 00 | 0% |
RGBA to HEX Examples
| RGBA | 8-Digit HEX |
|---|---|
| rgba(255, 0, 0, 1) | #FF0000FF |
| rgba(0, 0, 255, 0.5) | #0000FF80 |
| rgba(0, 0, 0, 0.8) | #000000CC |
| rgba(255, 255, 255, 0.1) | #FFFFFF1A |
Browser Support
8-digit HEX is supported in all modern browsers. For older browsers, use RGBA format as fallback.
``css
.overlay {
background-color: rgba(0, 0, 0, 0.5);
background-color: #00000080;
}
`
Use this converter to translate RGBA colors with transparency to compact 8-digit HEX format.
RGBA and HEX
| RGBA | HEX | |
|---|---|---|
| Syntax | rgba(255, 99, 71, 0.5), or rgb(255 99 71 / 50%) in modern CSS | #RRGGBB, or #RGB shorthand, or #RRGGBBAA with alpha |
| Channels | red, green, blue plus alpha from 0 (transparent) to 1 (opaque) | red, green, blue — each 0–255 written as two hex digits |
| Precision | 8 bits per colour channel; alpha is a float | 8 bits per channel, 16.7 million colours |
| Support | Universal. | Universal. The 8-digit alpha form needs a 2020-or-later browser. |
| Best for | Overlays, shadows, disabled states — anywhere the colour must let the layer below through. | Design handoff, CSS, anywhere a colour is written as a single token. |
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.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.