CSS Color

One syntax that we can use to specify colors is called hexadecimal. Colors specified using this system are called hex colors. A hex color begins with a hash character (#) which is followed by three or six characters. The characters represent values for red, blue and green.

DarkSeaGreen: #8FBC8F Sienna: #A0522D SaddleBrown: #8B4513 Brown: #A52A2A Black: #000000 or #000 White: #FFFFFF or #FFF Aqua: #00FFFF or #0FF

In the example above, you may notice that there are both letters and numbers in the values. This is because the hexadecimal number system has 16 digits (0-15) instead of 10 (0-9) like you are used to. To represent 10-15, we use A-F. Here is a list of many different colors and their hex values.

Notice that Black, White, and Aqua are all represented with both three characters and six characters. This can be done with hex colors whose number pairs are the same characters. In the example above, Aqua can be represented as #0FF because both of the first two characters are 0 and the second and third pairs of characters are both Fs. Keep in mind that all three character hex colors can be represented with six characters (by repeating each character twice) but the same is not true in reverse.

You can include hex colors just as you would include named colors: background-color: #9932cc;.



In the browser is a web page that uses named colors and hex colors. We’re going to translate the named colors into hex, to be more consistent. The colors won’t visually change, yet.

In style.css, find the CSS rule that uses the named color DarkSeaGreen and change it to its hex value, #8FBC8F.


Find the four other named colors of the roast types and convert them to their hex values, as shown here:

Sienna: #A0522D SaddleBrown: #8B4513 Brown: #A52A2A Black: #000000
Folder Icon

Take this course for free

Already have an account?