26

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.

Michael Petrotta
  • 59,888
  • 27
  • 145
  • 179
  • This page may be useful: http://www.w3schools.com/cssref/css_colors.asp – Leonardo Delfino Mar 07 '14 at 01:44
  • 2
    FF *does* mean 255. F = 15, 10 (hex) = 16, 16 * 16 = 256. But you need space for a zero. – helderdarocha Mar 07 '14 at 01:46
  • +1 @helderdarocha. Also, to tell the colour without memorising, you can use a browser addon like ColorZilla (https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en or https://addons.mozilla.org/en-US/firefox/addon/colorzilla/) or any graphics editing program such as Adobe Photoshop to pick a colour and grab the hex value, or input the hex value and see the colour. – Ming Mar 07 '14 at 02:16

6 Answers6

37

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

BrainArchitect
  • 558
  • 8
  • 16
  • As an aside, you can use the much more readable `rgb(254, 250, 253)` syntax for defining colours in CSS. It goes hand-in-hand with `rgba(254, 250, 253, A)`, with `A` in the range `0..1` to get translucency. – Niet the Dark Absol Jan 20 '15 at 16:05
  • 6
    It is worth explaining the math behind the conversion I think: If you take the `HEX` code as 3 pairs of symbols, and always multiply the first symbol in each pair by 16, and the second symbol by 1 then you will get the `RGB` value. In this case: (4*16 + 12*1), (8*16 + 14*1), (13*16 + 5*1) = 76, 142, 213 RGB value – Jonny Nov 18 '19 at 17:48
8

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

Diabetic Nephropathy
  • 190
  • 1
  • 10
nimrod100
  • 89
  • 1
  • 1
7

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

Arjuna Deva
  • 275
  • 4
  • 17
1

According to http://quashnick.net/geek_stuff/HEX2DEC.html

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: http://quashnick.net/geek_stuff/HEX2DEC.html
Know more about colors at: http://www.w3schools.com/html/html_colors.asp

Nemesis
  • 121
  • 2
  • 11
1

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
0

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

KPE
  • 17
  • 2