Eight-Digit CSS HEX: Alpha Order, Short Forms and Conversion

Read the token length before decoding channels

CSS accepts HEX color tokens with 3, 4, 6 or 8 hexadecimal digits after the hash. A six-digit token encodes red, green and blue as byte pairs and is opaque. An eight-digit token keeps those first six digits and adds alpha at the end. Uppercase and lowercase letters give the same values. [1]

The four-digit form is RGBA shorthand: repeat each character, rather than adding zeros. For example, #3698 becomes #33669988. The three-digit #369 becomes #336699 and is fully opaque. A shorthand token can express only the repeated-byte values; it is not an exact replacement for every longer token.

Keep alpha last, and distinguish a byte from a percentage

If the intended color is green at approximately half alpha, #00FF0080 has red 0, green 255, blue 0 and alpha 128. Putting 80 at the beginning produces a different token: #8000FF00 has red 128, green 0, blue 255 and alpha 0. Under ordinary compositing, that fully transparent value contributes no visible color over an opaque backdrop. [1]

The hexadecimal byte 80 equals decimal 128. Its alpha is 128/255 = 0.5019607843137255…, while exact 0.5 is 127.5/255 and cannot be stored as an integer byte. For exact 50% in a CSS declaration, use a numeric or percentage alpha, such as rgb(0 255 0 / 50%). [2]

Scroll inside the table on a phone. Keyboard readers can focus the region and use the arrow keys.

Use the decoder and compare the actual CSS color

The decoder treats the entered token as a whole CSS HEX value. It reports RGB and alpha separately, then applies that token as the sample’s background color. The browser’s computed background string is read from the sample; its syntax need not repeat the authored HEX.

A color painted over white is a composite appearance, not a new opaque base value you should automatically copy back into the token. Moving the same translucent color to another surface changes the appearance. Keep the original RGB bytes, alpha and backdrop in the record.

Displayed decimal alpha values are rounded. The fraction A/255 is the exact byte-to-alpha relationship; the decoder names the precision of its numeric output.

Convert deliberately, without silently discarding alpha

/* Equivalent base bytes; alpha is shown with its required precision. */
background-color: #00ff0080;
background-color: rgb(0 255 0 / 0.5019607843137255);

/* A deliberately different choice: exact 50% alpha. */
background-color: rgb(0 255 0 / 50%);

When exporting an arbitrary fraction to a byte, choose and document the rounding rule and the resulting error. A nearest-byte choice for 0.5 gives 128. It is a small change, not an exact equality. Do not repeatedly convert a rounded display string and describe the result as lossless.

The decoder accepts a leading hash and exactly the permitted HEX lengths. It does not pretend to parse arbitrary color functions, names or every application’s token format. Use the destination format’s actual specification when moving values outside CSS.

Validate the color value and its intended use separately

A token with an invalid length, such as #12345, is not a partly valid five-digit color. Correct the input rather than guessing which digit to remove. If a checker expects a six-digit base RGB value and a separate alpha field, supply those separate inputs; do not paste an eight-digit token into a field that does not support it.

The transparent-text calculator names that narrow input contract. Readability still depends on the actual foreground, backdrop and layer context. A successfully decoded HEX token establishes a color value, not an approved text pair or whole component.

Try two complete review cases

These are original teaching cases, with the assumptions stated in each question.