What Is a HEX Color? A Beginner’s Guide to Color Codes Used on the Web

TIPS

When you start choosing colors for a website, you will often see a string of letters and numbers beginning with “#”. This is a HEX color code: a way to specify an exact color for text, backgrounds, and other parts of a webpage. The notation may look unfamiliar at first, but its six-digit form follows a simple pattern. Here is how to read it, use it in CSS, and check whether your chosen colors work together.

HEX colors express red, green, and blue using hexadecimal numbers

HEX is short for hexadecimal, a number system that uses the ten digits 0–9 and the six letters A–F. In the common six-digit HEX format for the web, the “#” is followed by two digits for red (R), two for green (G), and two for blue (B). RGB refers to those red, green, and blue components that combine to describe the color displayed on a screen.

Take blue #1D4ED8 as an example. The first pair, “1D”, means 29 for red; “4E” means 78 for green; and “D8” means 216 for blue. In hexadecimal, “00” corresponds to 0 and “FF” corresponds to 255. White #FFFFFF has all three components at 255, while black #000000 has all three at 0.

Therefore, a HEX code is not a color name. It is a compact way to write three numerical color components. The same blue #1D4ED8 can also be written in CSS as rgb(29 78 216). Capital and lowercase letters in HEX codes represent the same values, so letter case does not change the color.

Using HEX in CSS: set backgrounds, text, and link colors

CSS (Cascading Style Sheets, the rules controlling how a webpage looks) uses background-color to set an element’s background and color to set its text color. Consider a simple notice card. Give the area surrounding it pale blue-gray #F8FAFC, the card itself white #FFFFFF, and the heading and body text dark blue-gray #1F2937. Use gray #64748B for a visible card border, blue #1D4ED8 for a details link, and dark navy #0F172A for the outline shown when someone reaches the link using a keyboard. Each color has a specific job.

The following HTML (HyperText Markup Language, which describes the content and structure of a webpage) and CSS form a small, illustrative example. The link destination is a placeholder rather than a real page.

<section class="notice-page">
  <article class="notice-card">
    <h3>Event announcement</h3>
    <p>Find the event date and registration details.</p>
    <a href="/sample/notice/">View details</a>
  </article>
</section>

.notice-page {
  padding: 24px;
  background-color: ■#F8FAFC;
}
.notice-card {
  padding: 24px;
  border: 1px solid ■#64748B;
  border-radius: 10px;
  background-color: ■#FFFFFF;
  color: ■#1F2937;
}
.notice-card h3 { margin-top: 0; }
.notice-card a {
  color: ■#1D4ED8;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.notice-card a:focus-visible {
  outline: 3px solid ■#0F172A;
  outline-offset: 3px;
}

The colored squares before the HEX codes are visual color samples; type only the HEX values into CSS, without the squares. The link also stays underlined so visitors do not have to rely on blue alone to recognize it.

The contrast ratio (a measure of the relative brightness difference between two colors) is about 14.68:1 for the dark text on the white card, and 6.70:1 for the blue link on white. The gray border has about 4.76:1 contrast against the white card and 4.55:1 against the pale outer background. The dark navy keyboard-focus outline has about 17.85:1 contrast against white. Even when the HEX syntax is correct, text and borders still need to be checked against the colors they actually touch.

Watch for shorthand HEX and check real-world legibility

CSS also supports a three-digit shorthand for certain six-digit HEX codes. For instance, orange #F80 represents exactly the same color as #FF8800. Each single digit is repeated to form a two-digit component, so not every six-digit code can be shortened to three digits. CSS also supports four- and eight-digit HEX formats that include transparency, but learning the opaque six-digit format first is a useful starting point.

The Web Content Accessibility Guidelines (WCAG) 2.2 generally require at least a 4.5:1 contrast ratio for normal-sized text. The text and link combinations above exceed that threshold, but the ratios must be recalculated if you change the backgrounds. Also check meaningful interface borders and icons against adjacent colors for the applicable non-text contrast requirements.

In HueRoll, you can enter three- or six-digit HEX codes, adjust the selected color, and copy a six-digit HEX code. It can show the selected color’s contrast against white and black, but it cannot automatically compare any two arbitrary colors or determine whether a combination conforms to WCAG. After choosing colors, check the actual text, background, and border combinations in the finished webpage.