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 CSS Basics (2014) Understanding Values and Units Color Values

Posted by Christopher Sea
Christopher Sea
3,726 Points

Hex notation or RGB function?

I know there are instances where ems are preferable to pixels & vise-versa. Are there any instances where hex notation would be preferable to rgb function? Is it just personal preference, or is there a semantic difference?

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

There's not really a difference unless you get to RGBa which introduces an alpha channel and indicates the opacity for that color. The decimal representation of FF is 255. That's why #FFFFFF is equivalent to the RGB value of 255,255,255. However, if you need opacity there then rgba might be the way to go. Here's some w3c documentation on CSS and colors. It makes mention of rgba. https://www.w3.org/TR/css3-color/

edited for personal opinion

In my opinion though, it's nicer to write in hexadecimal. Less typing! :)

edited for accuracy

Christopher Sea
Christopher Sea
3,726 Points

So this= rgba(255, 255, 255, 0.5);

does the same thing as this= color: #fff; opacity: 0.5;

and this= rgb(255, 255, 255); opacity: 0.5;

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

No, not exactly. Let's say that you have a div with the class "content". Let's take a look at the CSS for that:

.content {
    color:  green;
    background-color: black;
    opacity: 0.5;
}

In this case, it makes the opacity for all parts of this class (both the background color and the text color) have that opacity of 0.5. Where you might just want to have the opacity on the color or on the background separately. In that instance, it might be better to use a rgba value (in my opinion). When you use the rgba you're applying an opacity on that particular color instance (whatever it may be attached to). Hope that makes sense!

Christopher Sea
Christopher Sea
3,726 Points

Ok, that does makes sense. Thank you.

Callum Anderson
Callum Anderson
8,837 Points
Callum Anderson
Callum Anderson
8,837 Points

It's outside the scope of this course, but there is a valid reason for using rgb() over hex notation when working with Javascript.

As each value for r, g and b is a number between 0 and 255 when using rgb() notation, it's easy to 'program' a colour using Javascript code. You essentially have to generate three random numbers between 0 and 255, and insert them into 'rgb()'.

It's still possible to do using hex - just a lot more difficult!