What Is a Hex Code? The Language of Digital Color

Every color on every website, app, and digital interface has a precise numerical address. For most of the web's history, that address has taken a specific form: a hash symbol followed by six characters, like #3B82F6 or #FF5733. These are hex codes — the lingua franca of digital color.

If you design for screens, build web applications, or work with any design tool, you encounter hex codes constantly. This article explains exactly what they are, how the hexadecimal numbering system makes them work, and everything you need to know about shorthand notation, alpha transparency, and finding hex codes for any color.

The Hexadecimal Numbering System

The word "hex" comes from the Greek hexas, meaning six, and "decimal" from the Latin for ten. Hexadecimal is a base-16 numbering system — compared to the base-10 decimal system we use in everyday life.

In base 10, you count: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 — and then add a digit: 10, 11, 12...

In base 16, you count: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 — and then use letters to continue: A, B, C, D, E, F — before adding a digit: 10 (which equals 16 in decimal), 11 (17), ... FF (255).

Why Base 16 for Colors?

The reason is elegantly practical. A computer byte contains 8 binary bits and can hold values from 0 to 255. In hexadecimal, that entire range fits in exactly two digits: 00 (0) to FF (255). This makes hex a compact and readable encoding for byte-sized values — which is exactly what each color channel is.

In the RGB color model, each of the three channels — Red, Green, Blue — is a value from 0 to 255. In hexadecimal, that is 00 to FF. Three channels, two hex digits each, gives you six characters total. Add the # prefix to signal "this is a color," and you have the standard hex color code.

Reading 6-Digit Hex Codes (#RRGGBB)

A standard hex color code has the structure #RRGGBB:

• # — prefix that signals a hex color value
• RR — two hex digits encoding the Red channel (00–FF)
• GG — two hex digits encoding the Green channel (00–FF)
• BB — two hex digits encoding the Blue channel (00–FF)

Decoding an Example

Take #FF5733 — a warm coral-red:

The maximum red channel with moderate green and low blue produces a vivid orange-red. The low blue prevents the color from shifting toward neutral.

Now take #3B82F6 — a sky blue:

The dominant blue with moderate green produces a vivid medium-blue with a slight cyan quality. The low red keeps it cool.

Quick Reading Heuristics

Once you understand the structure, you can read hex codes approximately at a glance:

• 00 in a channel = none of that primary (fully dark in that channel)
• FF in a channel = full intensity of that primary
• 80 ≈ half intensity (128 of 255)

This lets you decode common codes quickly:

Equal values across all three channels always produce a neutral — gray, black, or white depending on the level. Unequal values always produce a color. The higher values indicate which primary color dominates.

Spotting Light vs Dark Hex Codes

If all six characters are high hex values (C, D, E, F), the color will be light. If all are low (0, 1, 2, 3), it will be dark. This gives you an instant lightness read:

• #F0E6D3 — all high values → light warm beige
• #1A1A2E — all low values → very dark navy
• #7C3AED — mixed values, high blue → medium purple

3-Digit Shorthand Notation

CSS allows a three-character hex shorthand when each pair of digits in the full six-character code consists of two identical characters. #AABBCC becomes #ABC. Each shorthand digit is simply doubled to produce the full version.

When Shorthand Is Valid

Shorthand only works when each pair is a repeated digit. #3B82F6 cannot be shortened because 3B, 82, and F6 are not doubled pairs. But #336699 qualifies as #369 because 33, 66, and 99 each repeat a single digit.

In practice, shorthand is a valid CSS feature but many teams standardize on the full six-character form for clarity. The six-character version makes it immediately obvious what each channel value is. Many linters and style guides enforce full hex for consistency.

8-Digit Hex with Alpha Transparency

The standard six-character hex code encodes only RGB — there is no opacity information. To add alpha transparency (controlling how opaque or transparent a color is), CSS supports an eight-character hex format:

#RRGGBBAA

The final AA pair encodes the alpha channel, using the same 0–255 range as the color channels, mapped to opacity:

Practical 8-Digit Hex Examples

A dark overlay for modal backgrounds: #000000 at 70% opacity → #000000B3

A brand blue #3B82F6 at 50% opacity → #3B82F680

A pure white #FFFFFF at 10% opacity (subtle highlight) → #FFFFFF1A

/* Modal scrim */
.modal-overlay {
  background-color: #000000B3;
}

/* Frosted glass panel */
.glass-card {
  background-color: #FFFFFF1A;
  backdrop-filter: blur(12px);
}

4-Digit Alpha Shorthand

Just as #RGB shorthand exists for #RRGGBB, a #RGBA shorthand exists for #RRGGBBAA:

• #F00F = #FF0000FF (pure red, fully opaque)
• #0008 = #00000088 (black at ~53% opacity)
• #FFF0 = #FFFFFF00 (fully transparent white)

Hex Alpha vs rgba()

Before eight-character hex was widely supported, the standard way to add transparency was CSS rgba():

/* These two declarations are equivalent */
background-color: #3B82F680;
background-color: rgba(59, 130, 246, 0.5);

Both are well supported in all modern browsers. The rgba() form is often more readable in CSS because the opacity is expressed as a decimal from 0 to 1, which is immediately understandable. The eight-character hex form is more compact but requires mental conversion from hex to opacity percentage.

Finding and Converting Hex Codes

In Design Tools

Every major design tool exposes hex values:

• Figma — Click any color fill or stroke; the hex code appears in the Fill panel on the right. Click "HEX" to copy.
• Adobe Illustrator / Photoshop — The color picker and swatches panel display hex codes. Window > Color if the panel is not visible.
• Sketch — The fill field shows hex codes with a copy button.
• Canva — Click any element, then the fill color chip to see and copy the hex code.

In Web Browsers

Right-click any element on a webpage and choose "Inspect" or "Inspect Element." In the browser DevTools, find the element in the CSS panel. Click any color value — it often cycles through format options (hex, rgb, hsl, oklch) with each click. Chrome DevTools also shows a color picker overlay.

For a quick color grab without DevTools, browser extensions like ColorZilla (Chrome/Firefox) let you sample any pixel on screen and copy its hex code.

On ColorFYI

Every color detail page on ColorFYI — such as /color/FF5733/ or /color/3B82F6/ — displays the full hex code alongside RGB, HSL, CMYK, and OKLCH values. If you have a color in another format, use the Color Converter to convert it to hex instantly:

• RGB to hex: Enter rgb(255, 87, 51) → get #FF5733
• HSL to hex: Enter hsl(11, 100%, 60%) → get the hex equivalent
• CMYK to hex: Enter CMYK percentages → get the approximate sRGB hex

Common Hex Conversion Table

Hex in CSS: Practical Usage

Hex codes work in any CSS property that accepts a color value:

/* Text */
color: #1E293B;

/* Background */
background-color: #F8FAFC;

/* Border */
border: 1px solid #E2E8F0;

/* Box shadow with alpha */
box-shadow: 0 4px 16px #0000001A;

/* CSS custom properties */
:root {
  --color-primary: #3B82F6;
  --color-primary-dark: #1D4ED8;
  --color-surface: #F8FAFC;
}

Case Sensitivity

Hex codes are case-insensitive in CSS. #3B82F6, #3b82f6, and #3B82f6 are identical. Most teams standardize on either all-uppercase or all-lowercase for consistency. Uppercase is traditional in design tools; lowercase is popular in modern codebases and is preferred by many linters.

Key Takeaways

• A hex code is a six-character hexadecimal number that encodes RGB color values. The structure is #RRGGBB — two hex digits each for red, green, and blue.
• Hexadecimal is base-16, using digits 0–9 and letters A–F. Each two-digit hex pair encodes a value from 0 (00) to 255 (FF), matching the full range of an RGB channel.
• Reading a hex code: high values in a pair mean high channel intensity. Equal values across all three pairs produce a neutral (gray, black, or white). Unequal values produce a color biased toward whichever channel is highest.
• 3-digit shorthand (#RGB) is valid when each pair repeats a single digit — #336699 shortens to #369.
• 8-digit hex (#RRGGBBAA) adds an alpha transparency channel. The last two digits range from 00 (transparent) to FF (opaque).
• Find hex codes in any design tool's color picker, in browser DevTools by inspecting elements, or on any ColorFYI color page.
• Use the Color Converter to translate between hex, RGB, HSL, CMYK, and OKLCH instantly.