What Is a Hex Color Code? How to Read and Write One (2026)

Anatomy of #ff5733

A hex color code starts with a # sign, followed by six digits in the characters 0 to 9 and a to f. Hexadecimal is base 16, so each position can hold 16 values, and two positions make 256 values, from 00 (0) to ff (255). That 0 to 255 range is exactly the range of one RGB channel, which is why hex and RGB are two notations for the same thing.

Take #ff5733, the orange-red used in this site's examples. Split it into three pairs: ff, 57, 33. The first pair is red: ff is the maximum, 255, so the red channel is fully on. The middle pair is green: 57 in hexadecimal is 87, a low-to-mid green. The last pair is blue: 33 is 51, a dim blue. Full red plus a little green and a little blue reads as a warm orange-red, which matches the swatch.

Reading a hex code by eye

You can estimate any color without a calculator. High digits mean a lot of that light; 00 means none of it. A few you can read instantly:

• #ff0000 is pure red: full red, zero green, zero blue.
• #00ff00 is pure green, and #0000ff is pure blue.
• #ffff00 is yellow: full red plus full green makes yellow light.
• #00ffff is cyan, and #ff00ff is magenta, for the same reason.
• #800000 is dark red: half-strength red, nothing else.
• #008080 is teal: no red, mid green and blue.

When all three pairs are equal, you get a gray, and the value sets the brightness. #333333 is a dark gray, #808080 is a medium gray, and #cccccc is a light gray. That is why gray codes look repetitive: equal red, green, and blue is the definition of a neutral.

Shorthand: when 3 digits are enough

If each pair has two identical digits, you can write the code with three digits instead of six. Each single digit simply doubles: #ff5533 shortens to #f53. Expand it back by doubling each digit, and you can convert from there. #f53 expands to #ff5533, which is rgb(255, 85, 51): ff is 255, 55 in hexadecimal is 85, and 33 is 51.

The shorthand only works when the digits repeat. #ff5733 cannot shorten because 57 and 33 are not doubled digits. When in doubt, keep all six digits; the long form is always valid.

Alpha: the 8-digit hex

Modern CSS also accepts 8-digit hex codes, where the last two digits set the opacity from 00 (transparent) to ff (opaque). #ff573380 is our orange-red at 50 percent opacity: the trailing 80 is 128 in decimal, and 128 out of 255 is about half. #ff5733ff is fully opaque, identical to the 6-digit form. Use 8-digit hex when you want transparency without switching to rgba().

How many colors can hex make?

Each of the three channels holds 256 values, so the total number of hex colors is 256 times 256 times 256, which is 16,777,216. Compare that to the 140 named CSS colors like red, teal, and papayawhip. Named colors are a convenience; hex covers every color a standard screen can show. That is why design systems store their palettes as hex tokens, not names.

Case and the hash: formatting rules

Hex codes are case-insensitive, so #ff5733, #FF5733, and #Ff5733 are identical. Lowercase is the web convention and the safer default, since most linters and design tokens use it. The leading # is required in CSS, but some contexts drop it: Figma's color picker, Tailwind's arbitrary values, and many APIs expect the six digits alone, so ff5733 without the hash. When copying a code from one tool to another, check whether the destination wants the hash or not; a pasted # in a field that expects bare digits is a common source of "invalid color" errors.

Where hex codes live

Hex is the default color notation across the web: CSS stylesheets, SVG graphics, HTML canvas (the fillStyle property), and design tools like Figma and Photoshop all accept it. It is compact, copy-paste friendly, and every developer recognizes it. Reach for RGB when you need the alpha channel in older code or computed values, and HSL when you are tweaking palettes by feel. To go between them, the free color converter translates any format instantly, and our RGB to hex guide walks through the conversion math.