What Does the # Symbol Mean in Web Colors? How to Read HEX Color Codes

When you see a dark blue■#2B4C73 color code in a web design, what does the leading “#” mean? It is not a number that controls brightness or an arbitrary label. It is an important part of the HEX color notation. This guide explains what the symbol does, how to read the six digits after it, and how to apply those values to the colors of a real webpage.

The # symbol marks the beginning of a hexadecimal color code

HEX is short for hexadecimal, a number system that uses digits 0–9 and letters A–F. In CSS (Cascading Style Sheets, the language that controls how webpages look), a color can be specified by a half-width # followed by hexadecimal digits. In the six-digit pattern #RRGGBB, RR stands for red, GG for green, and BB for blue. Together, these three components form RGB, short for Red, Green, and Blue.

Consider dark blue■#2B4C73. Break the six digits after the symbol into the pairs 2B, 4C, and 73. In decimal numbers, 2B means red 43, 4C means green 76, and 73 means blue 115. Each two-digit pair can range from 00 (zero) to FF (255). Uppercase and lowercase letters represent the same values, so capitalization does not change the color.

When you use a HEX value as a CSS color, remember to include the #. Writing only “2B4C73” as the value of the CSS color property (which controls text color) will not create a valid HEX color declaration. However, #contact has a different meaning when written as a CSS selector: it targets the element whose ID is “contact.” The context, not just the symbol, determines what it means.

Read the six digits to create a webpage information card

Imagine a compact contact-information card. Give the overall page a pale blue-gray background■#F4F7FA and the card a white background■#FFFFFF. Use dark blue■#2B4C73 for the heading and dark gray■#344255 for the body text. A blue-gray border■#6A7A8E separates the card from the page. Reuse the heading’s dark blue■#2B4C73 for the main button’s background, with white■#FFFFFF button text.

Now keep the last two pairs, 4C and 73, unchanged, but change the first pair from 2B (red 43) to 7B (red 123). The dark blue■#2B4C73 becomes a reddish purple■#7B4C73 because only its red component has increased. Reading HEX in pairs tells you which channel changed. Raising one channel, however, does not guarantee a proportionate increase in perceived brightness.

Prevent typing mistakes and check each color against its background

For CSS HEX values, use a half-width # without a space before the digits, and make sure every digit is from 0–9 or A–F. CSS also accepts three-, four-, and eight-digit HEX notation, but when reading the six-digit version, group the digits as two for red, two for green, and two for blue. Four- and eight-digit formats include an additional transparency component, so do not confuse their purpose with the basic six-digit notation.

In the card example, the dark blue heading■#2B4C73 has a contrast ratio of approximately 8.81:1 against the white card■#FFFFFF, while the dark gray body text■#344255 against white■#FFFFFF is approximately 10.21:1. The white button label■#FFFFFF against the dark blue button■#2B4C73 also reaches about 8.81:1. If you use the alternative reddish purple■#7B4C73 as a heading on white■#FFFFFF, the ratio is about 6.72:1. The Web Content Accessibility Guidelines (WCAG) 2.2 generally require at least 4.5:1 for normal-sized text. Check the actual foreground and background pairing after you change a color.

The blue-gray card border■#6A7A8E has a ratio of approximately 4.39:1 against the white card■#FFFFFF, and about 4.08:1 against the outer page background■#F4F7FA. Important interface boundaries should also be checked against neighboring colors. HueRoll accepts three- or six-digit HEX input and copies colors as six-digit HEX codes. When transferring a color into CSS, keep the leading # as part of that code to avoid an invalid value.