How does hexadecimal color work?

Question

Hexadecimal uses sixteen distinct symbols, in the case of css color the symbols 0–9 to represent values zero to nine (obviously), and A, B, C, D, E, F to represent values ten to fifteen. So, using one Hexadecimal character you can represent 16 values. With two Hexadecimal you can represent 256 (16*16) values.

In RGB you have colours represented by Red Green Blue (R=0-255, G=0-255, B=0-255), so we use 3 pairs of Hexadecimal symbols! So when you see an RGB color, you can make the calculation below.

Example:

Hex: #4C8ED5 is RGB: 76, 142, 213.

Because 4C = 76(Red), 8E = 142(Green), D5 = 213(Blue)!

Hope it helps your understanding!

More to read: Hexadecimal on Wikipedia and a nice RGB to Hexidecimal Converter

Basically if you had FF and that was the RED, because there are two hexdigits (0-9,A-F) we do: F = 15

15 * (16 ^ 0) = 15
15 * (16 ^ 1) = 240

240 + 15 = 255
RED = 255

the (16 ^ 0) and (16 ^ 1) bit means we are working in base 16. if you were doing KPE's example of 8040FF we would do:

F = 15

15 * (16 ^ 0) = 15
15 * (16 ^ 1) = 240

240 + 15 = 255
BLUE = 255

then

8 * (16 ^ 0) = 8
(BECAUSE WE HAVE 0 WE IGNORE IT)
(16 ^ 1) = 16
(BECAUSE WE IGNORED THE ZERO WE * INSTEAD OF +)
8 * 16 = 128
RED = 128

4 * (16 ^ 0) = 4
(BECAUSE WE HAVE 0 WE IGNORE IT)
(16 ^ 1) = 16
(BECAUSE WE IGNORED THE ZERO WE * INSTEAD OF +)
4 * 16 = 64

GREEN = 64

R = 128
G = 64
B = 255

Whereas if you had single hexdigits, eg. F, that equals 15 so RED = 15

I found the math part in some of the other answers rather confusing.

It is actually super simple. I found a good explanation here.

Colors in computers are expressed by combining red, green and blue in different proportions. Values for each color, range from 0 to 255. In RGB notation we express a pure red by writing (255,0,0) where green and blue have value 0. If we mix the same amount of each we get different shades of grey. (123,123,123) is some shade of grey, (0,0,0) stands for black and (255,255,255) is white.

Hexadecimal system takes the exact same principles and value ranges and tries to express them in a shorter way.

In our common decimal system one digit numbers go from 0 to 9 and then we need to use two digits, (i.e. 10).

To keep expressing larger numbers with only one digit the hexadecimal system gives numbers 10 through 15 a 1 character long representation by assigning them letters. So now: 10=A, 11=B, 12=C, 13=D, 14=E, 15=F. (Letters can be lowercase).

Lets look at how our decimal system works since it is very similar to the hexadecimal. In the number 13, the first digit is a one but represents a 10 and to get thirteen we add 3, 13=10+3. That is we multiply the second digit from right to left always by 10 and then add the next number. The 2 in 23 represents a 20. In hexadecimal we multiply the second digit from right to left always by 16. (Hexadecimal means sixteen).

Let's look at the number 4C. Here we multiply 4 times 16 since it is the second number from right to left, 4*16=64. C stands for 12 so now we add it to 64. 64+12=76, so the final answer is 4C=76.

To express the largest number possible for a value of either red, blue or green we write FF which stands for 255. So #FFFFFF would be equal to (255,255,255). Hence we can express all the numbers we need for red, green and blue with only 6 characters.

To shorten this even more, you can write 3 character codes where each character is doubled. For example #000 stands for #000000 and #ABC is equal to #AABBCC

Now, can you guess what the number CC9 is? This number is not needed to express a color but it will prove your understanding of hexadecimal numbers. Hint: In decimal 267 means (2100)+(610)+(7) or (21010)+(6*10)+(7).

Answer below.

(C1616)+(C*16)+(9)=

(121616)+(12*16)+(9)=

3072+192+9=3273

In a six-digit hexadecimal notation, the digits pairwise indicate the red, green, and blue component in the RGB system. For example, #0000FF has 0 for red, 0 for green, and FF (which is 15 × 16 + 15 = 255 in decimal), i.e. the maximum, for blue (in the meaning it has in RGB).

In the three-digit notation, each digit is doubled, and the result is interpreted as above. E.g., #00F means #0000FF.

Authoritative reference: 4.3.6 Colors in CSS 2.1 (the newer CSS Values and Units Module Level 3 just normatively cites CSS 2.1 for this definition; there are extensions to the CSS color concept, but they do not affect these issues).

RGB and CMYK are different color systems; there is no general conversion formula that converts between them.