What Is a Hex Color Code and How Do You Read and Use One?

A hex color code is a six-digit code that describes a color by mixing red, green, and blue light. It is written as #RRGGBB, where each pair of characters sets the intensity of one channel on a scale from 00 (none) to FF (full). You read it by splitting it into three pairs, and you use it anywhere a browser or design tool accepts a color value — most commonly in CSS. This applies to screen colors; it does not describe how a color will look in print.

How the #RRGGBB structure works

The code is hexadecimal, meaning each digit runs 0–9 then A–F, giving 16 possible values per digit and 256 per pair (16 × 16). Three pairs, one per channel:

So #FF0000 is full red, #00FF00 is full green, #0000FF is full blue, #000000 is black, and #FFFFFF is white. Mixing channels gives everything else: #FF6347 (Tomato) is high red, medium green, low blue.

Reading a code step by step

Take #20B2AA (Lightseagreen):

1. Split it: 20 / B2 / AA.
2. Convert each pair to decimal: 20 = 32 red, B2 = 178 green, AA = 170 blue.
3. That gives rgb(32, 178, 170) — a teal-leaning green.

You do not have to do this by hand. A lookup tool takes a hex code, an rgb value, or a browser color name and returns the conversions in rgb, hsl, hsv, cmyk, and the CIE spaces, plus harmonies, shades, and tints built around that color.

Converting between hex and other formats

The same color can be written several ways. These are equivalent:

• Hex: #FF6347
• RGB: rgb(255, 99, 71)
• HSL: a hue, saturation, and lightness triple

Hex and RGB are the same information in different notation — both are device-oriented and easy for machines to parse. HSL is often easier for humans to reason about, because you can nudge lightness or saturation without recalculating three channels. When you need to shift a color's mood, converting to HSL first is usually faster than editing hex digits directly.

Conversion works in both directions: a tool can take rgb(102, 51, 153) or the name teal and return the hex code, or take a hex code and return every other representation.

Hex vs browser color names, Pantone, and RAL

These are not competing ways to write the same thing — they serve different jobs.

• Browser color names are shortcuts. Browsers understand 148 named colors, and each maps to a fixed hex value. Tomato is #FF6347; Deeppink is #FF1493. Names are readable in code but limited to that fixed set, so they are a convenience, not a full palette.
• Pantone and RAL are standardized color systems used mainly in physical production — print, paint, and manufacturing. A hex code describes emitted light on a screen; a Pantone or RAL reference describes a physical standard. A tool can show the nearest Pantone and RAL match for a hex color, but "nearest" is an approximation, not an exact equivalence. If a color must match across screen and print, treat the screen value and the physical standard as two separate specifications.

For web and UI work, hex is the practical default. Reach for Pantone or RAL only when the color has to survive outside the screen.

Using hex colors in CSS and HTML

Hex values go wherever a color is accepted. In CSS:

/* text color */
body { color: #333333; }

/* background */
.card { background-color: #FF6347; }

/* border */
.button { border: 1px solid #20B2AA; }

The expected result is that the element renders in that exact color. In HTML you can also set colors through attributes on older elements, but CSS is the standard place to control color today.

Shorthand and alpha

• Shorthand: when each pair is a repeated digit, you can shorten six digits to three. #FF6600 becomes #F60, and #FFFFFF becomes #FFF. Both forms are valid and identical.
• Alpha (transparency): an eight-digit form #RRGGBBAA adds a fourth pair for opacity, where 00 is fully transparent and FF is fully opaque. Support for this varies by context, so check that your target accepts it before relying on it.

Common mistakes to avoid

• Missing the #. In CSS, FF6347 is not a color; #FF6347 is. The hash is part of the value.
• Wrong digit count. Valid lengths are 3, 6, or (where supported) 8. A 4- or 5-digit code will not parse.
• Assuming case matters. #ff6347 and #FF6347 are the same color. Case is a style choice, not a difference.
• Confusing hex with alpha syntax. Adding a fourth pair changes transparency, not the base color — do not expect #FF634700 to look like #FF6347.
• Treating a nearest Pantone/RAL match as exact. It is the closest reference, not a guaranteed match.

Checking that a color actually works

Picking a hex code is the easy part; making sure it is readable is the part people skip. Two checks matter most:

• Contrast: measure the color against white and against black to see whether text on it (or it as text) meets accessibility thresholds. A tool that reports contrast figures against both tells you immediately whether a pairing is usable.
• Color blindness: simulate how the color appears to viewers who see color differently. Two colors that look distinct to you can collapse into the same shade for some readers, which breaks charts, status indicators, and links that rely on color alone.

Both checks are worth running before a palette ships, not after.

Where to go next

If you have a hex code and want everything about it in one place — conversions, harmonies, shades and tints, contrast, and color-blind simulation — a lookup tool returns all of it from a single input. If you are starting from an image or a website instead of a code, palette-extraction tools pull the colors out for you. And if you need a full design system rather than one palette, look for output in the formats your project actually consumes, such as CSS variables, SCSS, or design tokens, with dark mode and contrast handled.