Basic CSS: Use RGB values to Color Elements (Help)

1

Can you please help me understand this sentence: “If you do the math, the two digits for one color equal 16 times 16, which gives us 256 total values.”

I think I am missing something here, and I don’t want to neglect it and move forward.

2

Welcome, sisbws.

It might help, if you expanded on what you are not understanding…

For the colour value used in web-development, you have a few options to define it.

  1. RGB (decimal) - a set of 3 numbers, each ranging from 0 to 255 (a total of 256 numbers each).
/*Use Case*/
h1 {
  color: rgb(0,255,0); /* This is green */
}
  1. RGB (hexadecimal) - a set of 6 characters, made up of the letters a to f, and the numbers 0 to 9. 0 being the lowest (similar to 0 above) and f being the highest (similar to 255 above). So, if your options are made up of 6 letters, and 10 numbers, you have 16 for each digit.
h1 {
  color: #00ff00; /* This is green */
  /* The above can also be written: #0F0 */
}

The difference is that, each of the RED, GREEN, and BLUE components is comprised of 2 characters. So, #FF (case does not matter, as far as I know) is the same as rgb(255), and #00 is the same as rgb(0).

Hope this helps

3

First of all, thank you for the reply.

I was not getting that two digit point mentioned above in my post.

This really helped me understand it now. A hex code consists of two digits for Red, Green and Blue. The max number in that code is FF, which gives us 16x16 = 256.

Can you let me know if I have understood it correctly?

4

That is exactly it! An easier way to understand it:
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 -> 16

1 Like