Introduction To Color Hex Codes @ OWDC

LESSON 1-04-01: Introduction To Color Hex Codes

Web Design Lessons > Lesson 1-04-01: Introduction To Color Hex Codes

Previous Lesson | Lesson Index | Next Lesson

In this section of our free online web design course, we're going to be learning all about color hex codes, allowing us to use many more colors on our web pages.

"Hex" is short for hexadecimal. "Hexadecimal" is the name of a numbering system, that is a little different from the regular system we use daily, because the hexadecimal system has 16 digits, and not 10; and the digits go from 0 to 15 rather than 0 to 9. Therefore, the system needs more symbols to define the 6 "excess" digits. This is accomplished by using the alphabetical characters of A,B,C,D,E and F - these characters are used to represent digits from 10 to 15. For instance, in the hex system, 0 corresponds to 0 and 9 corresponds to 9, like our regular system, but the hex system doesn't stop at 9 - it goes on up to number 15, and numbers from 10 to 15 are represented by letters from A to F. That is, A is number 10, B is number 11, C is 12, D is 13, E is 14 and F is number 15.

A 6-digit hexadecimal number preceeded by a sharp (#) sign is used to define colors used on the web. These 6 digits can be conceived as three columns: the first two digits form the first column, which controls how much RED is contained inside the color mix, the next two form the second column which controls how much GREEN is contained inside the color mix and the last two form the third column, which controls how much BLUE is contained inside the color mix. So if we have a color hex code like #FF0066, "FF" modifies RED, "00" GREEN and "66" BLUE. "FF" is the highest and "00" is the lowest value for a given column, thus #000000 is BLACK and #FFFFFF is WHITE! Some basic hex codes for colors are below:

Color Name:	Hex Code:	The Color:
BLACK	#000000
RED	#FF0000
GREEN	#00FF00
BLUE	#0000FF
YELLOW	#FFFF00
CYAN (or AQUA)	#00FFFF
MAGENTA (or FUCHSIA)	#FF00FF
WHITE	#FFFFFF

You can produce colors by experimenting with hex codes by yourself. For example the hex code #F0C162 creates the below color:

#F0C162

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

Let's go to the next lesson of our free web design course to learn about "web safe colors".

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

• Lesson 1-02 Fundamental HTML Tags
• Lesson 1-03 Basic Text Formatting
• Lesson 1-04 Web Colors Unleashed

• Lesson 1-04-01 Introduction to color hex codes

• Lesson 1-04-02 Web safe colors explored

• Lesson 1-04-03 Web safe color palette
• Lesson 1-05 HTML Tables
• Lesson 1-06 Background Alteration

Back To Top

WEB COLORS UNLEASHED!