Understanding Hex Color Codes

Hex color codes are the most common way to specify colors in web development. A hex color is a six-character string prefixed with #, where each pair of hexadecimal digits represents the intensity of one color channel: red, green, and blue (RGB). The values range from 00 (no intensity) to FF (full intensity, decimal 255).

Breaking down #FF5733:

Pair	Channel	Hex Value	Decimal	Intensity
FF	Red	FF	255	100%
57	Green	57	87	34%
33	Blue	33	51	20%

This produces a vivid orange-red color with maximum red, moderate green, and low blue.

How to read any hex color:

1. Ignore the # prefix
2. Split into three pairs: positions 1-2 (red), 3-4 (green), 5-6 (blue)
3. Convert each pair from hex to decimal (0-255)
4. Higher values mean more of that color channel

Shorthand notation:

When both digits in each pair are identical, CSS allows a three-character shorthand. For example, #FF8800 can be written as #F80. Each single digit is doubled to produce the full value: F becomes FF, 8 becomes 88, 0 becomes 00.

Eight-digit hex colors (with alpha):

CSS also supports eight-digit hex colors where the last two digits represent the alpha (opacity) channel. #FF573380 means the same orange-red color at 50% opacity (80 = 128/255 ≈ 50%). The value 00 is fully transparent and FF is fully opaque.

Common hex colors to know:

• #000000 — Black (all channels at 0)
• #FFFFFF — White (all channels at maximum)
• #FF0000 — Pure Red
• #00FF00 — Pure Green (also called Lime)
• #0000FF — Pure Blue
• #808080 — Medium Gray (equal mid-range values)

From a hex editor perspective:

When examining image files (PNG, BMP, TIFF) in a hex editor, pixel data is often stored as sequential RGB or RGBA byte triplets/quads. Understanding how hex byte values map to color channels lets you identify and even modify individual pixel colors directly in the binary data.