Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Jeffrey Bulman
PLUS
Jeffrey Bulman
Courses Plus Student 1,747 Points

Arghhhhhh HEXADECIMAL numbers !

So started my css route and ive gt to the riveting part of tge hexidecimal numbers. The explanation was abit to quick for someone who is naturaly allergic to numbers of any kind let alone numbers that stand for sonething else apart from the value they are. So how did you guys understand them as i dont want to be a web developer who only uses generic colors, due to me not getting my head around hexadecimal number. Any can explain them in their easiest explanation ? Examples would help.
Thanks Jeff

2 Answers

Hex numbers have 16 digits: 0 1 2 3 4 5 6 7 8 9 A B C D E F

You count through them like this:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F,
10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F,
20, 21, 22, 23 ... and so on all the way up to FF
(FF is the highest 2 digit hex number, and we are only working with 2 digit hex numbers in the hex color codes)

Hex color codes are split into three parts: red, green, and blue. The first two numbers determine the amount of red in the color, the middle two numbers determine the amount of green, and the last two determine the amount of blue.

This gives us a range of 00 to FF for each of the three colors (red, green, and blue), where 00 is the absence of the color and FF is the pure color.

Examples:
#FF0000 (red)
#00FF00 (green)
#0000FF (blue)

You can also tell what a color will be by how big the hex number is for the color.

Examples:
#3366FF (FF is greater than 33 or 66, so this color has more blue than red or green. This color is a shade of blue.)
#CC0066 (CC is greater than 00 or 66, so this color has more red than blue or green. This color is a shade of red.)

Here is an article that explains this in a little more detail.

There are also plenty of resources online that will allow you to choose a color and then provide you with its hex color code.

Speaking of online resources,

adobe's kuler (found at kuler.adobe.com)

is a great visual resource, and I believe it is mentioned in the css track as well.

Speaking to Jeffrey, rather than just picking a color and seeing it's hex equivalent, in adobe's kuler you can also type in the hex value you wish to see (as in Kristen's examples above) and view the color output of those hex codes as well as the decimal output (to continue her example: #FF0000 is RED and in decimal would be 255,0,0 and #00FF00 is GREEN and would be 0,255,0 in decimal).

Scott Easter
Scott Easter
7,148 Points

Hey Jeff,

If you are really struggling with codes, there are a ton of online resources to help you pick a color without needing to understand them (at first) Basically, hex colors just come with practice and use. So just keep trying to guess the right combination, first, then you'll slowly get the hang of it.

http://www.w3schools.com/tags/ref_colorpicker.asp could work, but just google hexidecimal color charts if you dont like that one

Hope that helps!