[an error occurred while processing this directive]
Go to Bottom Nav - July 20, 2018 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

While you may use other schemes for specifying the RGB values for your colors, hexadecimal used to be the only way. It is good to have an understanding of them since you will often see them in code you are viewing.

Hexadecimal Nomenclature

Aw Hexadecimal, this could be a pain in the ASCII

hexadecimal | heksəˈdes(ə)məl|
adjective in Computing
relating to or using a system of numerical notation that has 16 rather than 10 as its base.

Hexadecimal numbers are base 16 instead of the base 10 that we use in "everday" life (counting change...), so we need more digits. If you always count with your fingers like me, well...

Base 10 intergers go from 0 to 9, all the rest of the numbers are made from combinations of these ten numbers.

Base 16 intergers go from 0 to f, the "numbers" a, b, c, d, e, and f are used after the 9 to give us the extra intergers. All hexadecimal numbers are made from combinations of these sixteen intergers.

Using Hexadecimal Numbers for RGB Colors

When you see a hexidecimal number used for specifying an RGB color on the web, it will always be preceeded by the pound sign/hash symbol or #. This lets the browser know that the next three or six digit number is in hexidecimal and are the red, green, and blue values of the color.

Note that I wrote three or six digits above. Most often, you will see six digits, three is shorthand. With six digits, pairs of numbers indicate the RGB values in redredgreengreenblublue order. Here is the hexadecimal value for pink: #FF6699. Since each of the red, green, and blue values are doubles of the same digit, the shorthand version of the number would be: #F69.

Here are a few examples to give you some ideas.

Hexadecimal Number Color Visual Example
#FFFFFF or #FFF White  
#FFFF00 or #FF0 Yellow  
#00FFFF or #0FF Aqua  
#008080 Teal  
#999999 or #999 Medium Gray  
#FFA500 Orange  
#FF00FF or #F0F Fuchsia  
#000080 Navy  
#000000 or #000 Black  

Notice how darker colors tend towards the zeroes and lighter colors towards the "f"s.

Try some of the online color pickers to play with hexadecimal colors.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu