Hexadecimal Color Codes in Web Design — Complete Guide

What Are Hex Color Codes?

Every color you see on a website is defined by a combination of Red, Green, and Blue light. Hex color codes are a compact way to express these RGB values using hexadecimal (base-16) notation — and they’re the standard in CSS, HTML, and design tools worldwide.

🔧 Convert hex values: Number System Converter — instantly convert between decimal, hex, binary, and octal.

A hex color code starts with # followed by 6 characters (or 3 in shorthand), where each pair represents one color channel:

#RRGGBB
 ↑  ↑  ↑
 Red Green Blue

Each channel ranges from 00 (0 intensity) to FF (255, full intensity).

Common Web Colors Reference

Color	Hex Code	R	G	B
Black	#000000	0	0	0
White	#FFFFFF	255	255	255
Red	#FF0000	255	0	0
Green	#008000	0	128	0
Blue	#0000FF	0	0	255
Yellow	#FFFF00	255	255	0
Cyan	#00FFFF	0	255	255
Magenta	#FF00FF	255	0	255
Orange	#FFA500	255	165	0
Purple	#800080	128	0	128
Navy	#000080	0	0	128
Teal	#008080	0	128	128
Gray	#808080	128	128	128
Silver	#C0C0C0	192	192	192

How RGB Maps to Hexadecimal

Each RGB value (0–255 in decimal) converts to a 2-digit hex number (00–FF):

• Decimal 0 → Hex 00 (no light)
• Decimal 128 → Hex 80 (half intensity)
• Decimal 255 → Hex FF (full intensity)

Conversion Example: RGB(66, 135, 245) → Hex

1. R = 66 → 66 ÷ 16 = 4 remainder 2 → 42
2. G = 135 → 135 ÷ 16 = 8 remainder 7 → 87
3. B = 245 → 245 ÷ 16 = 15 remainder 5 → F5

Result: #4287F5 (Google Blue)

Use the Hex to Decimal Converter to verify any conversion.

Shorthand Hex Notation

When both digits in each pair are the same, you can use 3-character shorthand:

Shorthand	Expands To	Color
#FFF	#FFFFFF	White
#000	#000000	Black
#F00	#FF0000	Red
#0F0	#00FF00	Lime
#00F	#0000FF	Blue
#FC0	#FFCC00	Gold

#ABC expands to #AABBCC — each digit is doubled.

Hex Opacity (Alpha Channel)

Modern CSS supports 8-digit hex codes where the last 2 digits control transparency:

Opacity %	Hex Suffix	Example
100%	FF	#000000FF
90%	E6	#000000E6
75%	BF	#000000BF
50%	80	#00000080
25%	40	#00000040
10%	1A	#0000001A
0%	00	#00000000

This is equivalent to rgba() but more compact in CSS.

Using Hex Colors in CSS

/* Standard 6-digit hex */
.header { background-color: #0D1B2A; }

/* Shorthand */
.text { color: #FFF; }

/* 8-digit hex with alpha */
.overlay { background: #00000080; } /* 50% black */

How to Convert RGB to Hex Manually

Step 1: Take each RGB value (0–255) Step 2: Divide by 16, note quotient and remainder Step 3: Convert quotient and remainder to hex digits (10=A, 11=B, …, 15=F) Step 4: Combine: # + R hex + G hex + B hex

Example: Convert RGB(255, 165, 0) to hex

• R: 255 ÷ 16 = 15 remainder 15 → FF
• G: 165 ÷ 16 = 10 remainder 5 → A5
• B: 0 ÷ 16 = 0 remainder 0 → 00

Answer: #FFA500 (Orange) ✓

Why Designers Use Hex

1. Compact: 7 characters vs rgb(255, 165, 0) (16 characters)
2. Copy-paste friendly: No spaces or parentheses
3. Universal: Works in CSS, HTML attributes, design tools (Figma, Photoshop)
4. Easy to tweak: Changing one hex digit adjusts color slightly

Related Tools

• Number System Converter — convert decimal ↔ hex
• Hex to Decimal Converter — verify individual channel values

Related Articles

• Hexadecimal to Binary Guide
• Decimal to Hexadecimal Guide
• Computer Number Systems

FAQ

Q: Why do color codes use hexadecimal instead of decimal? A: Hex is base-16, so 2 digits can represent 256 values (0–255) — exactly the range needed per color channel. Decimal would need 3 digits, making codes longer.

Q: What is the difference between #RGB and #RRGGBB? A: #RGB is shorthand where each digit is doubled. #F0F becomes #FF00FF. Use it only when both digits in each pair are the same.

Q: Can I use hex colors in React/Tailwind CSS? A: Yes. In Tailwind use bg-[#FF5733] or define custom colors in config. In React inline styles use style={{color: '#FF5733'}}.

Q: What hex code is transparent? A: #00000000 (8-digit) or use transparent keyword. The last two digits 00 mean 0% opacity.

Q: How do I find the hex code of any color on screen? A: Use browser DevTools color picker, or tools like ColorZilla extension, macOS Digital Color Meter, or Windows PowerToys Color Picker.