Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Treehouse Club: CSS My First Web Page Color Keywords, Hex Colors, and Font Families

I don't quite understand how the whole RGB thing works. I know it has to do with the hexadecimal colors ie. #RRGGBB

What is the RGB and what does it have to do with the hexa. color?

2 Answers

Joe Consterdine
Joe Consterdine
13,965 Points

Hi Bridget,

essentially a hex color is 6 letters/numbers made up from the colors red, green and blue.

For e.g.

ff9933

This hex color is orange.

I'll break it down further:

ff9933

The first two letters/numbers are the red part of the color. In this example 'FF'.

The third and fourth letters/numbers are the green part of the color. In this example '99'.

The fifth and sixth letters/numbers are the blue part of the color. In this example '33'.

Thus making RGB (Red, green and blue).

In terms of RGB. It's just essentially the same thing as a hex color but broken down in to the actual numbers.

The numbers are between 0-255. 0 been the darkest and 255 the lightest.

If you go here:

http://hex.colorrrs.com/

and type in a hex code it will give the rgb color.

So for #ff9933 the rgb is rgb(255,153,51).

rgb(255,153,51).

The 255 part is the red part of the color. It's '255' so the lightest it can get.

The 153 part is the green part of the color. It's '153' so slightly more light then dark.

The 51 part is the blue part of the color. It's '51' so more dark than light.

These combined make orange.

In your CSS you can do this:

p {
color: #ff9933;
}

OR

p {
color: rgb(255,153,51);
}

These do the SAME thing.

Any questions let me know :)

Joe

Changed this to an answer because it is a pretty good explanation about how RGB works by looking at hex color values.

This was extremely helpful! Thank you!

Kevin Korte
Kevin Korte
28,149 Points

I will expand Joe's answer as to how #ff9933 is the same as rgb(255,153,51).

First, know that hex colors are a based on 16, meaning the hex color will be made up of one of the following:

0123456789ABCDEF

That is 16 characters, where really A = 10, B = 11, C = 12, D = 13, E = 14, F = 15. But remember, we started counting at 0. The same goes for rgb, it's base 0, so 255, really is the 256th number.

So you can take any rgb color and do the math to convert it.

So 255 / 16 = 15.93

So our first letter is #F

So 16 * 15 = 240. 255-240 = 15

So our second letter is #FF

And we repeat the process

153 / 16 = 9.56

So we have #FF9

16 * 9 = 144 and 153 - 144 = 9

So we have #FF99

And lastly

51 / 16 = 3.19

So we have #FF993

and 3 * 16 = 48 and 51 - 48 = 3

So we have #FF9933

And that's how the two are the same. The pattern to hex is always how many times the rgb number divides into 16, and than whatever the remainder is, is what makes the hex color value for that number.

Thanks