What does the hexadecimal that represents a CSS color mean? How can I tell what color it is without memorizing the exact code? Does it have any relationships with RGB (and CMYK) system?
I thought for a moment that FF means 255 in RGB, but then I realized that 15^2 isn't 255, but 225.
6 Answers
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:
#4C8ED5is 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.
