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 in the standard decimal system. 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 F
s. 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;
, and the letters can be uppercase or lowercase.
Instructions
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