Skip to content
Guide Apr 5, 2026 · 6 min read

How computers make color: RGB, HEX, and binary

#FF0000. #00FF00. #0000FF. You’ve probably seen this notation in design files or code at some point. It looks like a cipher, or a cheat code. It’s actually a color’s name.

#FF0000
#00FF00
#0000FF

From top to bottom: red, green, blue. These are the names computers use for colors. Here’s where that notation comes from.

RGB — three letters that make color

Red, Green, Blue. The three primary colors of light. Mix them in different proportions and you get every color we can see.

We look at RGB every day

Wherever there’s a screen, there’s almost always RGB.

  • Monitor / TV — each pixel is made of three subpixels: red, green, and blue
  • Smartphone display — same structure, smaller pixels
  • Gaming keyboard LEDs — three LEDs per key: R, G, and B
  • PC case lighting — RGB strips respond to RGB signals

Zoom in far enough on any screen and you’ll see it. Red, green, blue. That’s all there is. Millions of tiny RGB dots combine to form the single image you see.

Color is made by mixing

Each RGB channel has an intensity from 0 to 255.

  • RGB(255, 0, 0) — red at full, others off → pure red
  • RGB(0, 255, 0) — green at full, others off → pure green
  • RGB(255, 255, 0) — red + green → yellow
  • RGB(0, 0, 0) — all off → black
  • RGB(255, 255, 255) — all at full → white

It might seem wrong that red and green mix to yellow, but this is additive color mixing — light, not paint. In art class, mixing red and green paint gives brown. Light works differently: the more you add, the brighter it gets, and combining all three gives white.

Try moving the three sliders yourself.

#FF5733
RGB · 255 · 87 · 51
R 255 11111111
G 87 01010111
B 51 00110011

The 8-digit number on the right is the binary representation of that channel. Move the sliders and the binary updates in real time. How 0s and 1s produce 256 values is the next topic.

Why exactly 0 to 255?

Computers work only in 0s and 1s. A single place that holds either 0 or 1 is called a bit. Each additional bit doubles the number of values that can be expressed.

0/1
1 bit
= 2 values
0/10/1
2 bits
= 4 values
0/10/10/10/1
4 bits
= 16 values
0/10/10/10/1 0/10/10/10/1
8 bits
= 256 values ← one RGB channel

8 bits = 1 byte. A color has three RGB channels, so 3 bytes = 24 bits total. 24 bits can represent roughly 16.7 million colors — enough steps for the human eye to distinguish, which is why 1 byte per channel became the standard.

Reading binary directly

Each position has a fixed value. Left to right: 128, 64, 32, 16, 8, 4, 2, 1 — powers of 2.

1282⁷
642⁶
322⁵
162⁴
82³
42²
22¹
12⁰

Add up the values wherever a 1 appears, and you get the decimal number.

Example 1
0128
064
032
016
18
04
12
01
8 + 2 = 10
Example 2
1128
164
132
116
08
04
02
01
128 + 64 + 32 + 16 = 240
Example 3 — all 8 digits are 1
1128
164
132
116
18
14
12
11
128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 = 255

That’s why the maximum value of 8 bits is 255 — the exact reason each RGB channel spans 0 to 255.

HEX — the same number, written shorter

RGB(255, 255, 255). That’s 16 characters. Writing it out in every CSS rule or design tool field gets tedious fast. So a shorter way to write the same number was developed.

What hexadecimal is

Hexadecimal is a numbering system that represents 0 through 15 with a single character. Ordinary digits only cover 0–9, which is ten characters. The six missing values are borrowed from the alphabet.

0→0
1→1
2→2
3→3
4→4
5→5
6→6
7→7
8→8
9→9
10→A
11→B
12→C
13→D
14→E
15→F

Three rules:

  • 0–9 work as usual
  • 10 starts at A
  • F is the maximum for a single character (= 15)

Why hexadecimal specifically?

4 binary digits (0000 to 1111) represent exactly 16 values.

0000→0
0001→1
0010→2
0011→3
0100→4
0101→5
0110→6
0111→7
1000→8
1001→9
1010→A
1011→B
1100→C
1101→D
1110→E
1111→F

4 binary digits = 1 hex character. Four characters collapse into one. Since one RGB channel is 8 bits, it maps cleanly onto exactly two hex characters.

Converting RGB to HEX

Let’s convert RGB(255, 87, 51).

01
Convert R to hexadecimal
255→FF
02
Convert G to hexadecimal
87→57
03
Convert B to hexadecimal
51→33
04
Prepend # and join R·G·B in order
#FF5733

What was 14 characters is now 7 characters.

Reading color from HEX at a glance

Going the other way, you can get a feel for a color just by looking at its HEX code.

  • #FF5733 — R at max (FF), G at half (57), B low (33) → strong red leaning orange
  • #3576E0 — R low (35), G mid (76), B strong (E0) → blue with a hint of violet
  • #29A85A — R low (29), G strong (A8), B low (5A) → fresh green

Being able to glance at three pairs and tell “that’s orange-ish, that’s blue-ish” is how designers and developers end up speaking the same language.

Quick summary

  • RGB — three channels (red, green, blue), each 0–255
  • 8-bit binary — why a single channel produces 256 values
  • HEX — a shorter notation for the same numbers, two characters per channel

Once those three connect, color codes stop being a foreign language. The three RGB numbers are exactly the six HEX characters.

The next step is turning these numbers into a designer’s language. Requests like “a bit brighter,” “less saturated,” or “the same on paper” are hard to handle with RGB and HEX alone. How HSL, CMYK, and OKLCH solve this continues in RGB isn’t enough: HSL, CMYK, and OKLCH color notations.