What Is the Difference Between Three-Digit and Six-Digit HEX? How to Write Web Colors

When looking at CSS, you may see a three-digit color code such as ■#F80 and a six-digit code such as ■#FF8800. Does the shorter version specify a less accurate color? No: these two codes represent exactly the same orange. However, not every six-digit HEX value can be shortened to three digits without changing the color. This guide explains the conversion rule and how to use both forms confidently on a website.

Three-digit HEX expands to six digits by repeating each character

HEX stands for hexadecimal, a number system using the digits 0–9 and letters A–F. A CSS HEX color describes the red, green, and blue components of a color. In the usual six-digit form, each RGB component (red, green, and blue, the components combined to make the displayed color) takes two characters after the # sign.

For example, orange ■#F80 becomes ■#FF8800: the F for red expands to FF, the 8 for green to 88, and the 0 for blue to 00. This is an exact match, not an approximation. The shorter code has the same appearance as its expanded six-digit form.

Similarly, blue ■#06C is exactly the same color as ■#0066CC, and white ■#FFF equals ■#FFFFFF. HEX is case-insensitive, so changing letter case does not affect the color. A six-digit value can be shortened only when both characters in each red, green, and blue pair match. In other words, FF, 88, and 00 can become F, 8, and 0.

By contrast, slate gray ■#475569 contains the pairs 47, 55, and 69. The red and blue pairs cannot each be represented by one repeated character. Trying to force a three-digit approximation would create a different color. Keep the six-digit value whenever it cannot be reduced exactly.

CSS example: mix shorthand colors with a full six-digit value

Imagine a small update card on a website. Use white ■#FFF for the card background, dark gray ■#222 for the heading, and medium gray ■#555 for the border. Supporting information uses the six-digit slate ■#475569. Make the details link blue ■#06C and keep it underlined. An orange ■#F80 background marks a “New” badge, with dark ■#222 lettering. There is no problem mixing the two HEX lengths when every color has a clear role.

The following HTML (HyperText Markup Language, which describes the content and structure of a webpage) and CSS (Cascading Style Sheets, which controls the visual appearance) illustrate the idea. The destination of the link is only a placeholder.

<article class="hex-card">
  <span class="hex-card__tag">New</span>
  <h3>Our user guide has been updated</h3>
  <p class="hex-card__detail">Read about the latest changes.</p>
  <a href="/sample/guide/">Read the details</a>
</article>

.hex-card {
  padding: 20px;
  background-color: ■#FFF;
  color: ■#222;
  border: 2px solid ■#555;
  border-radius: 8px;
}
.hex-card__detail { color: ■#475569; }
.hex-card__tag {
  display: inline-block;
  padding: 4px 8px;
  background-color: ■#F80;
  color: ■#222;
  border: 2px solid ■#222;
}
.hex-card a {
  color: ■#06C;
  text-decoration: underline;
}
.hex-card a:focus-visible {
  outline: 3px solid ■#06C;
  outline-offset: 3px;
}

Contrast ratio measures the difference in relative brightness between a pair of colors. Dark text ■#222 on white ■#FFF has a ratio of about 15.91:1; the supporting slate ■#475569 on white is about 7.58:1, and the blue link ■#06C on white is about 5.57:1. The orange badge ■#F80 with dark text ■#222 measures about 6.65:1, while the gray card border ■#555 against white measures about 7.46:1. These are calculated values for the stated pairs. The link remains underlined so its purpose does not rely on color alone.

Do not shorten values that cannot be converted exactly

A team may choose to write all colors in six-digit form for consistency, or use the shorthand wherever it is an exact equivalent. Either convention is valid. What matters is that converting a value must not silently alter the intended color. CSS also supports four- and eight-digit HEX forms that include transparency; the three- and six-digit forms covered here specify opaque colors.

The Web Content Accessibility Guidelines (WCAG) 2.2 generally require a contrast ratio of at least 4.5:1 for normal-sized text. The text combinations in this example exceed that threshold. But shortening a color code does not improve its legibility. If you change the background, or use colors to identify meaningful controls and borders, verify text contrast and the applicable non-text contrast against the colors that actually touch.

HueRoll lets you enter three- or six-digit HEX values to adjust a color; the code you can copy from the tool is a six-digit HEX value. It can compare a selected color against white or black, but it does not automatically compare arbitrary color pairs or determine WCAG conformance. Choose the notation that supports accurate work, and check the finished color combinations rather than relying on code length.