How does hexadecimal color work?

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.


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.


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

Nimrod100's answer

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


8 * (16 ^ 0) = 8
(16 ^ 1) = 16
8 * 16 = 128
RED = 128

4 * (16 ^ 0) = 4
(16 ^ 1) = 16
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

The HEX code is representing three bytes, one for each of the RGB colors in that order.

FF0000 is full RED intensity, 00FF00 is full GREEN intensity, 0000FF is full BLUE intensity

8040FF corresponds to 128 RED, 64 GREEN and 255 blue

You can also write a short form where you don't specify the low 4 bits of each byte, like FFF for full WHITE, F00 for full RED, 00F for full BLUE

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.

According to

A Hexadecimal color value represents the Red Green Blue color (each uses 1 Byte). RGB is in decimal value for example RGB(255, 255, 255) but the Hex color code is in Hexadecimal format #FFFFFF ->(R) FF- (G) FF- (B) FF

HEX numbers are composed of digits 0 through 9 like DEC but also adds A-F. So when counting in HEX: HEX 0 1 2 3 4 5 6 7 8 9 A B C D E F

DEC 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Here is a HEX number: 1E5DF

To convert this to a DEC, we need to define the base for our power function. Since HEX is based on 16 different digits [0-9A-F], our base is 16.

To convert from HEX to DEC, follow these steps: We know that F = 15 in DEC so we use this formula (15*16^0) = 15 We know that D = 13 in DEC so we use this formula (13*16^1) = 208 We know that 5 = 5 in DEC so we use this formula (5*16^2) = 1280 We know that E = 14 in DEC so we use this formula (14*16^3) = 57344 We know that 1 = 1 in DEC so we use this formula (1*16^4) = 65536

Now we add all of the numbers together to get the DEC number for HEX number 1E5DF: 15 + 208 + 1280 + 57344 + 65536 = 124383

So our answer is HEX 1E5DF = DEC 124383

Read more at: Know more about colors at:

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, 4C=64.

To express the larger number we need to write we use FF which stands for 255. Hence we can express all the numbers we need for red, green and blue with 6 characters.

To shorten this even more, you can write 3 character ones where each character is doubled. For example #000 stands for #000000 or #ABC would be #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. Hint: In decimal 267 means (2*100)+(6*10)+(7) or (2*10*10)+(6*10)+(7).

Answer below.


Need Your Help

Dynamicaly add layout in layout?

android layout

I have a layout and i need to insert into in some kind of blocks with text - like comments date, name, text. Is there a way to use it like this

Calling javascript function's result into Jquery css event, on load and resize

javascript jquery

I want to call logoSocialHeight() function's result into $('header.main').css('top',logoSocialHeight()).hover(