Convert CSS colors without losing alpha or misreading contrast
Convert a transparent HEX color to RGB and HSL, check text on its real background, and compare near-threshold contrast values with worked examples.
Decide whether the destination needs transparency
HEX, RGB and HSL can describe the same 8-bit sRGB color. Alpha adds coverage from fully transparent to fully opaque. If a format omits alpha, copying it loses that part of the value. The Color Converter shows opaque and alpha-preserving formats separately so you can make that choice deliberately.
This converter works with 8-bit sRGB channels. It does not convert wide-gamut, Lab or arbitrary named CSS colors. Small differences after an HSL round trip can result from rounding to integer RGB channels and displayed decimal precision.
Example 1: one transparent color, several CSS forms
Enter #33669980. Check the following output fields. The short RGB and HSL fields describe the opaque color, while RGBA and HSLA keep the alpha.
| Field | Expected value |
|---|---|
| HEX | #336699 |
| HEXA | #33669980 |
| RGB | rgb(51, 102, 153) |
| RGBA | rgba(51, 102, 153, 0.502) |
| HSL | hsl(210, 50%, 40%) |
| HSLA | hsla(210, 50%, 40%, 0.502) |
The alpha byte 80 equals 128 out of 255. That is approximately 0.502 rather than exactly 0.5. Entering rgba(51, 102, 153, 0.5) keeps alpha 0.5 internally, while a HEXA export must quantize it to one of 256 byte values. This explains a small alpha difference after converting through HEXA.
Four-digit HEX is shorthand for doubled channel digits. For example, #f008 expands to #ff000088, with alpha 136/255, approximately 0.5333. It does not mean 8% opacity.
Example 2: a color close to the normal-text threshold
Choose a white background and enter opaque #777777. The calculated ratio is about 4.48:1. It falls below 4.5:1, so this tool does not report it as meeting the normal-text threshold. Change the color to #767676: its ratio is about 4.54:1.
The result compares the unrounded value with the threshold. A displayed number close to a boundary should not be rounded into a pass. The W3C explanation of minimum text contrast describes the 4.5:1 requirement for ordinary text and the 3:1 requirement for large-scale text, with its size definitions and exceptions.
Example 3: alpha makes the background part of the answer
Enter rgb(0 0 0 / 50%) against white. The converter composites that foreground over the chosen background before calculating relative luminance; the ratio is approximately 3.98:1. The same translucent foreground over black becomes black and has a ratio of 1:1. Alpha therefore cannot be judged independently of the background.
For a real interface, check each text state against the actual surface behind it. Text over a photo, gradient or video needs an assessment of its least favorable area rather than one flat-color sample. Font size, weight, focus states, non-color cues and other accessibility requirements remain separate checks.
Use HEXA, RGBA or HSLA if you need transparency in CSS. Review a downloaded stylesheet's variables in a small component before applying them globally. The opaque color picker removes alpha, so re-enter an alpha-preserving value after using it if needed. Invalid channel ranges, mixed delimiter syntax and missing HSL percent signs are rejected instead of silently changed.