What Is CSS 8-Digit HEX? How to Read Color Codes Including Transparency

When you encounter an eight-digit HEX color code in CSS, the final two characters can be confusing. They represent opacity, added to the familiar six-digit color code. By reading the color components in order and converting the last pair, you can determine both the base color and how much of it shows through. This guide explains the eight digits, including the four-digit shorthand, and uses two help-page notes to show what different alpha values actually look like.

Read eight-digit HEX as RRGGBBAA: the final AA controls opacity

A CSS (Cascading Style Sheets) HEX color begins with # and uses hexadecimal digits—numbers 0 through 9 and letters A through F. The eight-digit pattern is #RRGGBBAA. The RR, GG, and BB pairs specify the red, green, and blue channels, while the final AA specifies the alpha channel, or opacity. In CSS this alpha pair goes after the six color digits, not before them.

Take teal ■#0F766E with an alpha component: ■#0F766E1A. Its 0F means 15 red, 76 means 118 green, and 6E means 110 blue. The final 1A is hexadecimal 26. Divide by 255 and multiply by 100 to obtain approximately 10.2% opacity. In other words, the color is approximately 89.8% transparent—not 10.2% transparent.

Useful alpha landmarks are 00 for 0% opacity (fully transparent), 33 for 20%, 80 for approximately 50.2%, CC for 80%, and FF for 100% opacity. For instance, ■#0F766E80 is the same teal at about 50.2% opacity. A two-digit hexadecimal alpha value has 256 possible steps, so it cannot represent every arbitrary percentage with exact precision.

CSS also allows the four-digit #RGBA shorthand. Each digit is repeated to produce the full eight-digit form: for example, ■#2A8C expands to ■#22AA88CC. Shorthand works only when each pair in the expanded red, green, blue, and alpha components consists of two identical characters. Uppercase and lowercase HEX letters are equivalent.

Example: use eight-digit HEX for two help-page note backgrounds

Imagine a help page with a light “Helpful tip” note and a stronger “Check before proceeding” note. Place both over white ■#FFFFFF, starting from the same teal ■#0F766E and using dark blue-gray ■#173449 for text. The lighter note has ■#0F766E1A (approximately 10.2% opacity). The stronger note uses ■#0F766E4D (approximately 30.2% opacity). Written headings identify the notes so their meaning does not depend on color alone.

<div class="reading-notes">
  <section class="reading-note reading-note--soft">
    <h3>Helpful tip</h3>
    <p>Review the settings before continuing.</p>
  </section>
  <section class="reading-note reading-note--strong">
    <h3>Check before proceeding</h3>
    <p>Take another look at the details you entered.</p>
  </section>
</div>

.reading-notes {
  display: grid;
  gap: 16px;
  padding: 20px;
  background-color: ■#FFFFFF;
}
.reading-note {
  padding: 16px 20px;
  border-left: 4px solid ■#0F766E;
  border-radius: 8px;
  color: ■#173449;
}
.reading-note--soft {
  background-color: ■#0F766E1A;
}
.reading-note--strong {
  background-color: ■#0F766E4D;
}
.reading-note h3 { margin: 0 0 8px; }
.reading-note p { margin: 0; }

Once blended with the solid white surface, the lighter note’s background appears approximately ■#E7F1F0 and the stronger note’s background approximately ■#B7D6D3. These are the resulting displayed colors on white; the eight-digit values instead specify teal plus opacity. Only background-color is translucent in this example, so the note text and solid left borders do not fade.

Check the underlying background, contrast, and alpha strength

Dark blue-gray text ■#173449 against the light note’s displayed background ■#E7F1F0 has a contrast ratio of approximately 11.23:1. Against the stronger background ■#B7D6D3, it reaches approximately 8.36:1. Both exceed the 4.5:1 minimum for normal-sized text in the Web Content Accessibility Guidelines (WCAG) 2.2. The teal ■#0F766E left border has contrast ratios of approximately 4.75:1 and 3.54:1 against the respective note backgrounds. Where an interface boundary is necessary to understand a component or its state, check the relevant 3:1 non-text contrast threshold against adjacent colors.

These calculations assume a solid white surface beneath the translucent colors. If the notes are placed over a photograph or dark background, the displayed colors and contrast ratios change even though the eight-digit codes stay the same. You can adjust the last two HEX digits to make the teal more or less opaque, but too much tint can reduce the contrast of the text. Applying the CSS opacity property to the whole parent would also fade its text, so use alpha in the background color when only the background should be translucent.

The same transparency can be expressed using RGBA, but learning how to choose between color formats is a different question from reading the individual digits. HueRoll copies six-digit HEX codes, so append the two alpha digits in your CSS when transparency is needed. HueRoll does not automatically composite a translucent color against an arbitrary backdrop or check contrast between arbitrary color pairs. Verify the actual combined colors before relying on them in a finished interface.