Hex Color Codes Explained: Reading, Writing, and Converting Them

Hex color codes are everywhere in web development. Every CSS file, every design tool, every brand guide uses them. Understanding how they work makes you faster and more confident when working with color.

The Structure

A hex code is a six-digit representation of an RGB color value in base-16 (hexadecimal). The format is #RRGGBB where RR is the red channel, GG is the green channel, and BB is the blue channel. Each channel ranges from 00 (none) to FF (maximum, which is 255 in decimal).

Reading Hex at a Glance

With practice, you can estimate a hex color without a picker. High first pair (R) with low others means red-dominant. #e54646 is clearly red (E5 red, 46 green, 46 blue). Equal values means gray: #808080 is medium gray. All high means light: #f0f0f0 is near-white. All low means dark: #1a1a1a is near-black.

Shorthand Notation

CSS supports three-digit shorthand where each digit is doubled: #f00 becomes #ff0000 (pure red). This only works when each pair consists of the same digit repeated. #4f46e5 has no shorthand because its pairs are 4F, 46, and E5, none of which are repeating digits.

Eight-Digit Hex (Alpha)

Modern CSS supports #RRGGBBAA where the last two digits control opacity. #4f46e580 is the same blue at about 50% opacity (80 hex is 128 decimal, roughly half of 255). This is increasingly common in design tokens but not yet universal in all tools.