Origin
The word hexadecimal combines the Greek prefix hexa– (“six”) with decimal (“ten”), referring to the fact that hexadecimal is base 16: six plus ten equals sixteen.
Introduction
The hexadecimal numeral system (often called hex) is a base-16 number system. A hexadecimal digit can represent one of 16 possible values (0-9, A-F).
Hexadecimal is often used to represent RGB colors. RGB and hexadecimal aren’t two different kinds of color, they are just two ways of writing the same RGB values. For example, a bright shade of red can be represented as RGB(255, 0, 0). That same shade or red in hexadecimal is #FF0000.
Hexadecimal Numeral System Symbols
| Decimal | Hexadecimal |
|---|---|
| 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 |
Since hexadecimal needs 16 symbols but uses only the numbers 0–9, the letters A through F are used to represent the remaining six values.
Beyond F
After F (15), counting continues with 10, just like decimal continues from 9 to 10. We move to a new column and start the first column over at 0.
The value of 10 in hexadecimal isn’t the same as 10 in decimal. In other words, F represents 15, so the next number (F + 1) is 10 in hexadecimal, which represents 16 in decimal.
- Decimal: 9 + 1 = 10 (ten)
- Hexadecimal: F + 1 = 10 (sixteen)
What is Base-16?
Base?
A numeral system’s base tells you how many unique symbols it uses before counting continues in the next place value.
- Decimal (base-10) uses 10 symbols: 0–9.
- Hexadecimal (base-16) uses 16 symbols: 0–9 and A–F.
You probably already know the base-10 system: it’s the number system we normally use for counting. It has 10 digits, 0 through 9. When you reach 9 and need to count one more, you reset that digit to 0 and add 1 to the next column, giving you 10.
Hexadecimal works the same way, except it uses 16 digits instead of 10. The first 10 are 0 through 9, and the remaining six are A through F.
Why Use Hexadecimal?
Computers represent data using bits (0s and 1s). While binary works well for computers, long strings of 0s and 1s can be difficult for people to read and write. Hexadecimal gives us a more compact way to represent the same binary data. Each hexadecimal digit corresponds to exactly four binary digits (bits).
For example, take the binary number: 11001010. Split it into groups of four: 1100 1010
Each group maps directly to one hexadecimal digit:
1100 = C
1010 = A
So 11001010 in binary can be written as CA in hexadecimal.
Hexadecimal doesn’t change the underlying data, it just gives us a shorter, more human-friendly way to write it. This is why programmers commonly use hexadecimal when working with things like memory addresses, machine code, colors, and other data represented as bits.
| Binary | Hexadecimal |
|---|---|
| 1100 | C |
| 1010 | A |
| 11001010 | CA |
RGB vs Hexadecimal Color Values
If you’ve chosen a color in Photoshop, Google Docs, Canva, or CSS, you might have seen a color represented by something like #FFFFFF. That’s a color expressed using hexadecimal notation.
RGB Color
The RGB color model represents colors by combining red (R), green (G), and blue (B) light. Colors are commonly written as (R, G, B), where each number represents the intensity of one of the three color components.
In a standard 8-bit RGB representation, each component has a value from 0 to 255. That’s because each component is stored using 8 bits (one byte), which can represent 256 different values: 0 through 255.
For example:
- Red: (255, 0, 0)
- Green: (0, 255, 0)
- Blue: (0, 0, 255)
- Yellow: (255,255,0)
- Magenta: (255,0,255)
- Cyan: (0,255,255)
Minimum and Maximum Color Intensity
A value of 0 means none of that color component is present. A value of 255 means that component is at its maximum intensity.
- Black is when all three components are 0: (0, 0, 0) = black
- White is when all three are 255: (255, 255, 255) = white
- Shades of gray are when the components have the same value. For example: (128, 128, 128) = gray
Hexadecimal Colors
Instead of writing three decimal numbers from 0 to 255, we can write each value using two hexadecimal digits.
- RR = red intensity
- GG = green intensity
- BB = blue intensity
Each hexadecimal digit represents a value from 0 to 15. Two hexadecimal digits can represent values from 0 to 255 (the same range as one byte).
For example:
- #FF0000 = red = (255, 0, 0)
- #00FF00 = green = (0, 255, 0)
- #0000FF = blue= (0, 0, 255)
So hexadecimal isn’t a different way of creating the color. It’s simply a more compact way of writing the same RGB values.
Minimum and Maximum Values
The minimum RGB value is 0. In hexadecimal, 0 is written as 00 when two digits are required.
The maximum RGB value is 255. In hexadecimal, 255 is written as FF.
- 0 in RGB = 00 in hexadecimal
- 255 in RGB = FF in hexadecimal
For example:
- (0, 0, 0) = #000000 = black
- (255, 255, 255) = #FFFFFF = white
Remember that hexadecimal uses the digits 0–9 followed by A–F.
| R | R | G | G | B | B | |
| Black | 0 | 0 | 0 | 0 | 0 | 0 |
| White | F | F | F | F | F | F |
Converting RGB Values to Hexadecimal
To convert an RGB color to hexadecimal first convert each of the three RGB values from decimal to hexadecimal.
For example:
- 255 in RGB = FF in hexadecimal
- 0 in RGB = 00 in hexadecimal
- 128 in RGB = 80 in hexadecimal
Then put the three hexadecimal values together. Each RGB value becomes exactly two hexadecimal digits.
If we are converting RGB(255, 128, 0), for example, we start by converting each value separately.
- 255 becomes FF
- 128 becomes 80
- 0 becomes 00
Put them together in the same order: RGB(255, 128, 0) becomes #FF8000.
Conversion From Decimal to Hexadecimal
To convert a decimal number (such as 128) to hexadecimal:
- Divide the decimal number by 16 and note the remainder.
- Divide the quotient by 16 and note the new remainder.
- Repeat until the quotient is 0.
- Read the remainders in reverse order, from bottom to top.
- Convert any remainders from 10 through 15 to their hexadecimal equivalents:
- 10: A
- 11: B
- 12: C
- 13: D
- 14: E
- 15: F
Important: discard the fractional part of the quotient, but still keep the remainder.
Example: 128 decimal to 80 hexadecimal:
- 128 ÷ 16 = 8 remainder 0
- 8 ÷ 16 = 0 remainder 8
Remember to start from the bottom and move up; the decimal number 128 is represented as 80 in hexadecimal.
Example: 255 decimal to FF hexadecimal:
255 ÷ 16 = 15.9375
Discard the fractional part. Our first remainder is 15 which we know is F.
Now we take the whole number quotient (15) and divide that by 16. 16 doesn’t fit into 15 even once, so the quotient is 0.
But we still have ALL of the 15 left over. That’s the remainder. 15 = (16 × 0) + 15
| Quotient | Remainder |
|---|---|
| 255 ÷ 16 = 15 | 15 ( F) |
| 15 ÷ 16 = 0 | 15 ( F) |
Why start from the bottom and move up?
Each division by 16 extracts the least significant hexadecimal digit first.
- 255 ÷ 16 = 15 remainder 15 = F (least significant digit)
- 15 ÷ 16 = 0 remainder 15 = F (next digit)
The division/remainder process happens to find the least-significant digit first. Reversing the order puts the hexadecimal digits in the correct order from most-significant to least-significant. Whether a number is most or least significant is important for positional numeral systems.
Color Shade Examples: Red and Gray
Let’s look at different shades of red. We can change the first two hexadecimal digits (the RR value) while keeping the green and blue values at 00.
The RR value controls the intensity of red:
- 00 is the minimum.
- FF is the maximum.
- Values between 00 and FF produce different levels of red intensity.
| Hexadecimal Code | RR | GG | BB |
|---|---|---|---|
| #330000 | 33 | 00 | 00 |
|
#660000 | 66 | 00 | 00 |
|
#990000 | 99 | 00 | 00 |
|
#CC0000 | CC | 00 | 00 |
|
#FF0000 | FF | 00 | 00 |
For gray shades, all three RGB components are equal. The same is true in hexadecimal: if all three pairs contain the same value, the color is a shade of gray (aside from white #FFFFFF and black #000000).
| Hexadecimal Code | RR | GG | BB |
|---|---|---|---|
|
#222222 | 33 | 00 | 00 |
|
#666666 | 66 | 00 | 00 |
|
#999999 | 99 | 00 | 00 |
|
#AAAAAA | CC | 00 | 00 |
|
#CCCCCC | FF | 00 | 00 |
The Shortcut: 3-digit Hex Codes
Some six-digit hexadecimal colors can be shortened to three digits. This works when both digits in every pair are identical. Each digit in the shortened version is simply repeated: #3A9 means #33AA99.
- #FFFFFF = #FFF
- #33AA99 = #3A9
But this shortcut only works when every pair contains identical digits. For example, #29A7D9 cannot be shortened because the pairs are 29, A7, and D9, and none of them contains two identical digits. So #29A7D9 and #2AD are not the same color.
Lowercase vs. Uppercase?
It’s purely a style choice. Hexadecimal values can be written in either uppercase or lowercase, and both will work the same way (i.e., #FFFFFF and #ffffff are the same color). The choice between uppercase and lowercase is generally a matter of style or convention. Different programming languages, tools, and communities may prefer one or the other. For example, many programmers prefer using lowercase in their code for readability.
Prefixes and Suffixes
Hexadecimal numbers are sometimes marked so that it’s clear they are hexadecimal rather than decimal.
Common conventions include:
- 0x63: a hexadecimal number in many programming languages
- 63h: a hexadecimal number in some assembly languages and technical documentation
- #FFFFFF: a hexadecimal color value in CSS
These conventions aren’t interchangeable in every programming language. The # in particular is used for hexadecimal color notation in CSS.
Summary
Hexadecimal is a base-16 numbering system that uses the symbols 0–9 and A–F. For RGB colors, each color component normally has a value from 0 to 255. Two hexadecimal digits can represent that entire range, so an RGB color can be written compactly as #RRGGBB.
For example:
- RGB(255, 0, 0) = #FF0000
- RGB(0, 255, 0) = #00FF00
- RGB(0, 0, 255) = #0000FF
Hexadecimal doesn’t change the color. It simply provides a compact way to write the RGB values.
