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 trialChristopher Sea
3,726 PointsHex 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
Treehouse TeacherThere'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
Callum Anderson
8,837 PointsIt'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!
Christopher Sea
3,726 PointsChristopher Sea
3,726 PointsSo 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
Treehouse TeacherJennifer Nordell
Treehouse TeacherNo, not exactly. Let's say that you have a div with the class "content". Let's take a look at the CSS for that:
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
3,726 PointsChristopher Sea
3,726 PointsOk, that does makes sense. Thank you.