What is a HEX Color Code? Format, Usage & Web Design Guide

What is a HEX Color Code?

A HEX color code is a 6-character alphanumeric code (using digits 0–9 and letters A–F) that represents a specific color in web design, digital graphics, and UI development. It is written with a # prefix followed by three pairs of hexadecimal digits — each pair representing the intensity of Red, Green, and Blue light (the RGB model).

HEX is the most widely used color notation in CSS, HTML and design tools because of its compact format. #FF5733, #1a3a6e, and #FFFFFF are all HEX codes — representing orange, dark navy, and white respectively.

How HEX Codes Work

Each HEX code is a pair of three 2-digit hexadecimal numbers:

#FF

Red (0–FF)

57

Green (0–FF)

33

Blue (0–FF)

#FF5733

rgb(255, 87, 51)

Each pair ranges from 00 (no intensity) to FF (maximum = 255 in decimal). The system can represent 16,777,216 unique colors.

Common HEX Colors

HEX Code	Color Name	RGB Equivalent
#000000	Black	rgb(0, 0, 0)
#FFFFFF	White	rgb(255, 255, 255)
#FF0000	Red	rgb(255, 0, 0)
#00FF00	Lime Green	rgb(0, 255, 0)
#0000FF	Blue	rgb(0, 0, 255)
#FFFF00	Yellow	rgb(255, 255, 0)
#FF5733	Orange-Red	rgb(255, 87, 51)
#1a3a6e	Dark Navy	rgb(26, 58, 110)

HEX vs RGB vs HSL

HEX (#RRGGBB): Most compact — widely used in HTML/CSS. Not human-readable without a reference.
RGB (rgb(r,g,b)): Human-readable values 0–255. Used in CSS and supports alpha channel via rgba().
HSL (hsl(h,s,l)): Hue, Saturation, Lightness. Most intuitive for designers — easy to adjust brightness or make palettes.
All three are equivalent and interconvertible — choose based on your workflow preference.

How to Use HEX Codes

CSS: color: #1a3a6e; or background-color: #FF5733;
HTML attributes: <div style="color:#FF5733">
Design tools: Paste directly into Figma, Canva, Photoshop, Illustrator color pickers
Shorthand: #RGB shorthand exists for colors where both digits are identical — e.g. #FFF = #FFFFFF, #03A = #0033AA

Frequently Asked Questions

What is a HEX color code?▼

A HEX color code is a 6-character (or 3-character shorthand) hexadecimal representation of a color in web design. It starts with # followed by 6 digits (0-9, A-F) that define the intensity of Red, Green and Blue — for example #FF5733.

How many colors can HEX represent?▼

HEX color codes can represent exactly 16,777,216 colors (256 × 256 × 256 — one for each possible combination of red, green, and blue values from 0 to 255).

What is the difference between HEX and RGB?▼

Both represent the same colors. RGB uses decimal values — e.g. rgb(255, 87, 51). HEX is the hexadecimal equivalent — #FF5733. They are interchangeable; web designers typically use HEX for its compact notation, while RGB is used in CSS for transparency (rgba).

How do I convert RGB to HEX?▼

Convert each RGB value (0–255) to a 2-digit hexadecimal number. Example: RGB(255, 87, 51) → Red=FF, Green=57, Blue=33 → #FF5733. Most design tools and online converters do this automatically.

Can a HEX code include transparency?▼

Standard 6-digit HEX codes have no transparency. However, 8-digit HEX codes (e.g. #FF573380) add 2 digits for alpha/opacity — supported in modern browsers and CSS. For transparency in CSS, rgba() is more commonly used.

What does each pair of digits in a HEX code represent?▼

A 6-digit HEX code is three pairs: the first pair (#RR) is red intensity, the second (#GG) is green, the third (#BB) is blue. Each pair ranges from 00 (minimum) to FF (maximum — equivalent to decimal 255).