How Hex Color Codes Work: The Complete Beginner’s Guide

Hex color codes are a simple way to tell computers which color to show. They start with a “#” followed by six characters (digits or letters).

Each pair of characters represents one of the primary colors: red, green, or blue. Think of it like a secret code: #RRGGBB where RR is red, GG is green, and BB is blue. For example, #FF0000 means “all red, no green, no blue” (pure red). This guide breaks down the hex format step by step, shows how it relates to RGB values, and gives lots of real examples you can try out.

What Is a Hex Color Code?

A hex color code is a way to write down a color using numbers and letters in base-16 (hexadecimal). Every computer screen color is made by mixing red, green, and blue light. Hex codes use three pairs of digits to say how much red, green, and blue to mix. It always starts with a # (pound sign) to mark it as a hex color.

Base-16 (“hexadecimal”): Hex means base 16, which uses digits 0–9 and letters A–F. In decimal (base 10) we count 0–9, then 10 is “10”. In hex, after 9 comes A (which is 10 in decimal), then B (11), up to F (15). One hex digit goes from 0 to F (0 to 15). Two hex digits together (like “FF”) go from 00 (0) to FF (15×16+15 = 255) in decimal.
RGB model: Computers use an additive RGB color model. This means colors are made by adding amounts of Red, Green, and Blue light. If you set all to 0, you get black. If you set all to max (255 decimal, or FF hex), you get white. For example, RGB(255, 0, 0) is bright red, RGB(0, 255, 0) is bright green, and RGB(0, 0, 255) is bright blue.

Putting those ideas together, a hex code like #FF0000 says “red = 255 (FF hex), green = 0, blue = 0,” giving pure red. Every hex color is really just shorthand for its RGB parts.

Breaking Down the Hex Color Code, #RRGGBB Format

A standard hex code has six characters after the #, written as RRGGBB. Each pair (RR, GG, BB) is a two-digit hex number from 00 to FF (0 to 255 in decimal).

RR (red): How much red light. 00 means 0 red, FF means 255 (full red).
GG (green): How much green light, from 00 to FF.
BB (blue): How much blue light, from 00 to FF.

In other words, each color channel is 8 bits (1 byte) ranging from 0 to 255. The hex code just glues them together. For example:

#FF0000 = (Red=FF, Green=00, Blue=00) = RGB(255,0,0) (bright red).
#00FF00 = (00,FF,00) = RGB(0,255,0) (bright green).
#0000FF = (00,00,FF) = RGB(0,0,255) (bright blue).
#FFFFFF = (FF,FF,FF) = RGB(255,255,255) (white).
#000000 = (00,00,00) = RGB(0,0,0) (black).

Each pair goes from 00 (decimal 0) to FF (decimal 255). So #800080 means Red=128, Green=0, Blue=128 (a shade of purple) because 0x80 in hex is 128 in decimal.

Did you know? Hexadecimal is just a numbering system. In hex, the digits are 0–9 then A=10, B=11, … F=15. So when you see A–F in a color, they represent 10–15. For instance, “A” in hex means 10, and “F” means 15 (so “FF” is 15×16+15=255).

Hex Shorthand

Browsers also allow a 3-digit shorthand when each pair repeats. For example, #ABC is short for #AABBCC. That means Red=AA, Green=BB, Blue=CC (in hex). For example, #F00 is the same as #FF0000 (full red). These short codes are just a shortcut when the two digits are the same.

How Hex and RGB Relate

Hex codes and RGB are just two ways to say the same thing. A hex code #RRGGBB corresponds exactly to rgb(R,G,B) values. For example:

#FF0000 = rgb(255, 0, 0): pure red.
#00FFFF = rgb(0, 255, 255): cyan (no red, green+blue).
#FFFF00 = rgb(255, 255, 0): yellow (red+green).

In words, hex is base-16 notation for the same 0–255 range used by RGB. If you know one format, you can convert to the other. For example, the decimal numbers (123, 58, 30) for (R, G, B) become the hex triplet 7B3A1E. And vice versa, hex 7B = 7×16+11 = 123 decimal, etc.

Figure: A photo separated into its Red, Green, and Blue channels. Any color you see is made by mixing these three channels. For instance, #FF0000 lights up the red channel (255 red, no green/blue), while #00FF00 lights up the green channel.

That image shows how one picture can be split into just its red, green, or blue parts. When you write a hex code, you are basically saying how bright to make each of those parts. A hex code works behind the scenes the same way as the rgb() function.

In CSS or HTML, you can use either: color: #FF00FF; or color: rgb(255, 0, 255); both give the same purple color.
If you see a website theme color like #3B5998 (a Facebook-blue), it means R=59, G=89, B=152 in decimal (3B=59, 59=89, 98=152).

Common Hex Codes (Examples)

Here are some everyday hex colors and what they mean:

Black: #000000 (no R, no G, no B).
White: #FFFFFF (full R, full G, full B).
Red: #FF0000 (full red, no green/blue).
Green: #00FF00 (full green, no red/blue).
Blue: #0000FF (full blue, no red/green).
Gray: #808080 (128 red, 128 green, 128 blue) – a medium gray.
Magenta: #FF00FF (red + blue) – bright pinkish-purple.
Yellow: #FFFF00 (red + green) – bright yellow.

For example, the hex code #BC012E is a special named shade called Akai Red. It means RGB(188, 1, 46) – a deep red color. The code #FFBE98 is Pantone’s Peach Fuzz (Color of 2024) in hex.

You’ll see many color pickers list both the name and code. Sites like ColorWikia have pages for each named color with its hex (for example, “Red” is #FF0000, and “Akai Red” is #BC012E). Designers often use hex codes directly for precision.

Why Hex Colors?

Hex codes are popular in web and graphic design because they are short and easy to write in code. They combine neatly with HTML/CSS. A few reasons people like hex:

Web-Standard: Hex codes have been used since the early web (HTML color values). All modern browsers and design tools support them.
Compact: A 6-digit hex is shorter than writing three separate decimal numbers, especially when using short form (#RGB).
Exact Colors: Unlike named colors, hex can specify any of over 16 million colors (256³).

Quick Tip: You can sometimes use CSS color names (like red, blue), but it’s best to know the hex or rgb. Hex is also handy if you copy/paste colors from palettes.

Frequently Asked Terms

RGB: Stands for Red, Green, Blue – the three lights mixed on screens. An “RGB value” usually means something like rgb(255,0,0).
Additive Color: Since screens add light, combining all colors makes white (R=255,G=255,B=255). No color (all zero) makes black. This is opposite of painting, where mixing pigments makes darker tones.
Hexadecimal: A numbering system base-16. In hex color, # signals base-16. The digits 00 to FF represent 0–255 in decimal.
Shorthand: #RGB expands to #RRGGBB. E.g. #0F0 is #00FF00 (green).

Fun Fact: In CSS, an 8-digit hex like #RRGGBBAA can include alpha (transparency). For example, #FF000080 is semi-transparent red (where “80” is 50% opacity). But beginners can just stick to 6 digits first.

Quick Examples in Action

Try it out: Open any drawing app or CSS file and type #00FFFF. You’ll see cyan. Change it to #FF00FF and you get magenta.
In HTML: <div style="background:#FFD700;">Gold</div> will make a gold-colored box (FFD700 is a gold-like color).
Picking Colors: Many design tools and websites let you enter a hex code to choose a color precisely.

Because hex is standard, even 2024–2025 apps and frameworks use it. For example, the popular design library Bootstrap uses variables like --bs-primary: #0d6efd; for its main blue color.

Summary

Hex color codes are simply six-digit hex numbers that tell a computer how much red, green, and blue to mix. Remember the format #RRGGBB: RR is red, GG is green, BB is blue (each from 00 to FF).

For example, #FFFFFF is white (max of all three), #000000 is black (none of them), and #FF0000 is bright red. Hex codes are just a compact way to write RGB(255,255,255) or RGB(255,0,0), etc.

Now when you see a color code like #7F00FF, you can decode it: 7F hex is 127 decimal, so that’s (127,0,255) – a purple. It’s really that simple once you know each pair means R, G, or B. Hex codes unlock a world of over 16 million colors, and you’ve just learned how to read them. Happy coloring!