If you’ve ever peeked at a website’s CSS, opened a color picker in Photoshop, or tried to match a brand’s exact shade, you’ve encountered HEX color codes. They look cryptic at first — #FF5733, #1A1A2E, #FFFFFF — but the logic behind them is elegant and learnable. This guide breaks down exactly what HEX codes are, how they work, and how to read them with confidence.
What Does “HEX” Mean?
HEX is short for hexadecimal — a compound of the Greek hex (“six”) and the Latin decimalis (“of ten”). It refers to a base-16 number system, as opposed to the base-10 (decimal) system we use in everyday life.
To understand why base-16 matters, it helps to zoom out.
Number Systems: A Quick Primer
Every number system is essentially a different language for representing quantity. The system you were taught in school — decimal — uses ten symbols: 0 through 9. When you exceed 9, you add another digit and start over (10, 11, 12…).
Computers, at the hardware level, work in base-2 (binary): just two symbols, 0 and 1, representing the on/off states of transistors. Binary is accurate but verbose — the number 255 in binary is 11111111, eight digits long.
This is where hexadecimal steps in as a practical middle ground. Base-16 uses sixteen symbols: 0–9 and A–F, where A = 10, B = 11, C = 12, D = 13, E = 14, F = 15.
Since there are only ten numeric digits (0–9), hexadecimal borrows six letters: A through F, representing the values 10 through 15. This means a single hex digit can represent 16 different values, whereas a single decimal digit can only represent 10. Two hex digits together can represent 256 different values (16 × 16), which is exactly the range needed for color channels.
Quick Conversion Examples
- Decimal 0 = Hex 00
- Decimal 15 = Hex 0F
- Decimal 16 = Hex 10
- Decimal 255 = Hex FF
The key thing to notice: 255 in decimal is FF in hex — just two characters instead of three. This compactness is exactly why hexadecimal was chosen for color codes.
The RGB Color Model
Before we can decode a HEX color code, we need to understand what it’s encoding: RGB values.
The RGB model represents colors as combinations of three light sources — Red, Green, and Blue — at varying intensities. Mix red and green light and you get yellow. Mix all three at full intensity and you get white. Zero intensity across all three gives you black.
Each channel has a value from 0 to 255 (256 possible levels). So a color in RGB is expressed as three numbers: rgb(255, 87, 51), for example.
The RGB model is native to screens, which produce light. This is why it’s the standard in web and UI design. (Print design uses CMYK instead, which is a subtractive model based on ink.)
How HEX Color Codes Work
A HEX color code is simply an RGB value written in hexadecimal notation. The format is:
#RRGGBBWhere:
- # is the prefix that signals a hex color value
- RR is the red channel (00–FF)
- GG is the green channel (00–FF)
- BB is the blue channel (00–FF)
Each pair of hex digits represents one color channel’s intensity from 0 (00) to 255 (FF).
Reading a HEX Code
Take #FF5733:
- FF = 255 red → full intensity red
- 57 = 87 green → moderate green
- 33 = 51 blue → low blue
The result: a warm, vivid orange-red.
Common Color Landmarks
#FF0000— pure red (full red, no green, no blue)#00FF00— pure green#0000FF— pure blue#FFFFFF— white (all channels at maximum)#000000— black (all channels at zero)#808080— medium gray (all channels at 128)
Notice the pattern: when all three channels are equal, you get a shade of gray — from #000000 (black) to #FFFFFF (white).
The Shorthand: 3-Digit HEX Codes
When each pair in a HEX code consists of two identical digits, it can be abbreviated to a single digit per channel:
#FFFFFF→#FFF(white)#000000→#000(black)#FF0000→#F00(red)#AABBCC→#ABC
This shorthand only works when every pair is a doubled digit. #FF5733 cannot be shortened — the pairs are FF, 57, and 33, and 57 and 33 are not doubled digits. The 3-digit shorthand is valid CSS and recognized by all major browsers.
HEX with Transparency: 8-Digit Codes
Standard HEX codes define three color channels. But modern CSS also supports an optional alpha (transparency) channel, producing an 8-digit format:
#RRGGBBAAThe last two digits (AA) represent opacity from 00 (fully transparent) to FF (fully opaque):
#FF573300— fully invisible#FF573380— 50% transparent (approximately)#FF5733FF— fully opaque (same as#FF5733)
This format is supported in CSS4 and in modern design tools. It’s useful for specifying translucent overlays, shadows, and layered UI elements directly in code.
A Brief History: Why HEX Became the Standard for Web
Before the 1990s, color management on computers was inconsistent — different operating systems and monitors handled color in different ways. With the rise of the web, a consistent, compact way to specify color across devices was needed.
The first HTML specification defined 16 named colors — red, blue, green, and so on — a set that’s often called the “basic” or “web-safe” palette. But 16 colors were quickly insufficient for real design work.
HEX color notation, already established in computing contexts, was adopted as the standard way to specify arbitrary colors in HTML and CSS. It allowed any of the 16,777,216 possible RGB colors (256 × 256 × 256) to be written compactly in six characters.
Later specifications added rgb() and hsl() notation as CSS alternatives, but HEX remains the most commonly used format in practice — especially for sharing colors between designers and developers.
HEX vs. Other Color Formats
HEX isn’t the only way to specify colors in CSS and design tools. Here’s how it compares:
- HEX (
#FF5733) — Compact and widely recognized. Standard in most design tools and CSS codebases. Slightly opaque to read without practice. - RGB (
rgb(255, 87, 51)) — More readable to humans. Easier to adjust individual channels. Requires more characters. Supports alpha viargba(). - HSL (
hsl(11, 100%, 60%)) — Stands for Hue, Saturation, Lightness. Most intuitive for designing color relationships — rotating the hue value shifts the color around the color wheel predictably. - Named Colors — CSS recognizes 140+ named colors:
tomato,steelblue,rebeccapurple. Easy to read, but limited to the predefined set.
In practice, HEX is the lingua franca — most designers and developers think and communicate in HEX, even if they use HSL internally for programmatic color manipulation.
Working with HEX Colors in Practice
You don’t need to manually convert between decimal and hexadecimal — design tools and development environments handle this automatically.
- In Figma: Click any color swatch to open the color picker. The HEX value is shown and editable directly. You can also switch between HEX, RGB, HSL, and other formats in the picker.
- In Adobe Photoshop / Illustrator: The color picker shows HEX values alongside RGB and other models. Copy a HEX code directly from the color picker to use in code.
- In CSS: Use the HEX value directly in your stylesheet:
color: #FF5733;orbackground-color: #1A1A2E; - Browser DevTools: Chrome and Firefox’s inspector shows computed colors and lets you edit HEX values live, with a color picker built in.
- Color converter tools: Tools like coolors.co, color.adobe.com, or simply searching “color picker” in Google provide instant conversion between HEX, RGB, and HSL.
Reading HEX Codes Like a Designer
With a bit of practice, you can develop an intuitive sense of what a HEX code represents without needing a tool to visualize it:
- Higher first pair = more red.
#FFat the start means full red channel;#00means no red. - Equal pairs = neutral.
#808080is a medium gray because all channels are balanced at 128. - FF means full, 00 means none.
#00FF00is pure green;#000080is a dark navy (no red, no green, half-strength blue). - Codes with pairs near FF overall = bright/light colors.
#FFFACD(lemon chiffon) is almost white — all channels are high. - Codes with pairs near 00 overall = dark colors.
#1A1A2Eis a near-black deep navy.
Summary
HEX color codes are a compact, hexadecimal way to express RGB color values — each pair of characters representing one color channel (red, green, blue) on a scale from 00 to FF. Once you understand the structure, reading and working with HEX codes becomes second nature.
You don’t need to do the math yourself — Figma, Photoshop, VS Code, and your browser’s DevTools all handle the conversion. But knowing how HEX codes work makes you a more fluent designer and developer: you can read a color at a glance, debug unexpected shades, and communicate precisely with anyone you’re collaborating with.
Color is the most immediate visual element of any design. HEX codes are how that element is specified, shared, and reproduced consistently — across tools, teams, and screens.
