Colors

“Changing the Background Color” briefly introduced how to change the background color to yellow. That’s kind of neat, but this just raises more questions. If yellow is available, what are the other colors I can use? Can I change the foreground color? Can I apply colors to just a small selection of text?

Text (Foreground) Color

Here’s how to change the text color:

  1. Add an attribute called style to the element. (<element style="">)

  2. Inside the style attribute, specify the color you want by typing color: followed by the color you want. (<element style="color: red">)

    Note

    As with all attributes, do not include the style attribute in the closing tag, </p>.

For example:

Example 2.10. Red Paragraph

<p>
  The grandmother lived out in the wood, half a league from the village,
  and just as Little Red-Cap entered the wood, a wolf met her. Red-Cap
  did not know what a wicked creature he was, and was not at all afraid
  of him.
</p>
<p style="color: red">
  'Good day, Little Red-Cap,' said he.
</p>
<p>
  'Thank you kindly, wolf.'
</p>

In the earlier example, Example 1.6, “Background Color”, the background of the entire page turned yellow. But in our example above, the text turns red. A style attribute value of background: sets the background color, while color: sets the foreground color.

Note

The keywords color and background are called CSS properties. CSS (Cascading Style Sheets) is a technique for applying style to elements. Changing the element’s color is just one small example of what CSS can do. We’ll learn a lot more about CSS in Chapter 3, Styling Basics, but for now let’s focus on color specifically.

Background Color

To change the background color of a element, you just need to use a different property in the style attribute: the background property. If you apply the background to the body element, this changes the background color of the entire web page. (We saw an example of this in “Tinkering”.) Not only can you change an element’s background color, you can change the text color at the same time:

Example 2.11. Text and Background Color

<p style="background: yellow; color: purple">
  There's a yellow rose in Texas, That I am going to see,<br>
  Nobody else could miss her, Not half as much as me.<br>
  She cried so when I left her, It like to broke my heart,<br>
  And if I ever find her, We nevermore will part. <br>
</p>

The paragraph has two properties, background and color. When you apply multiple properties, you can add them in any order, but you must separate them with a semicolon. If you forget the semicolon:

<p style="background: yellow color: purple">
  There's a yellow rose in Texas, That I am going to see,<br>
  Nobody else could miss her, Not half as much as me.<br>
  She cried so when I left her, It like to broke my heart,<br>
  And if I ever find her, We nevermore will part. <br>
</p>

then the browser interprets this as setting the background color to the value yellow color: purple. Since yellow color: purple is not a valid color, the browser does nothing (and you might be left puzzling over why your styles aren’t appearing).

The results, Example 2.11, “Text and Background Color” are particularly garish and difficult to read. This brings up an important point: it is very easy to go wrong when choosing text and background colors. Use the color and background properties with caution.

Inline Color Styles

Although so far we’ve only applied the color properties to block elements such as body and p, you may apply the color properties to inline elements as well, including the elements from “Font Styles”. For example,

<p>
  <strong style="color: red">DANGER:</strong> Flying monkeys.
</p>

The red color applies to the strong element, but not to the rest of the paragraph.

If you just want to change the color of a selection of text without also making it bold or italic, there is a special inline element called the span element. The span element “does nothing” by default, and so it is safe for applying styles without affecting anything else. We’ll discuss this element further in the section “Div and Span”.

Note

Although you may apply the style attribute to a wide array of elements, there are some exceptions. For example, you might think you can change the color of the title in your browser’s titlebar by adding a style attribute to the title element. However, this is invalid HTML, and the browser ignores it.

In general, you may apply style to nearly any element that falls under body, including body itself.

Specifying Colors

In the previous examples, we were using color keywords such as red, green, and so on. What other words are available? The answer it, it depends on your browser.

Here are sixteen color keywords that are nearly universal across all browsers that support color:

Figure 2.1. Standard Color Keywords

Standard Color Keywords

The numbers after the pound sign (#) are called hex codes. Hex codes are another way to represent colors in HTML. It gets a little technical after this, so hang on…

Note

Those of you who grew up in the 1960s and experienced the “New Math” might have a small advantage here. See, I bet you thought you’d never use that stuff again!

Hex Codes

Each of the six numbers in a hex code is a hexadecimal, or base-16 number.

  • In the ordinary decimal system, each numeral (0-9) represents a power of ten. You need ten symbols to represent decimal numbers: 0, 1, 2, 3, 4, 5, 6, 7, 8, and last but not least, 9.

    With two decimal numerals, the highest number you can make is “99”. “9” in the tens place + “9” in the ones place = (nine x ten) + (nine x one) = 90 + 9 = 99.

  • In a hexadecimal system, each numeral represents a power of sixteen, and so you need sixteen symbols (0-9 and a, b, c, d, e, f). Here, a = 10 (decimal), b = 11 (decimal), and so on up to f = 15 (decimal).

    With two hexadecimal numerals, the highest number you can make is “ff”, which is 255 in decimal notation. “f” in the sixteens place + “f” in the ones place = (fifteen x sixteen) + (fifteen x one) = 240 + 15 = 255.

A color hex code consists of three two-digit hexadecimal numbers. Each number indicates how much red, green, and blue the browser should display. The first hex number indicates how much red to use, the second indicates the amount of green, and the third specifies the blue: RRGGBB. 00 means “use none of this color”, while ff means “use as much of this color as possible.”

Figure 2.2, “Hex Code #ff9933” demonstrates how this works. The hex code #ff9933 provides the maximum amount of red, a middling amount of green, and a small amount of blue. Mixing the three together results in an orange-ish color.

Figure 2.2. Hex Code #ff9933

Hex Code #ff9933

Here are some more examples:

  • color: #ff0000 = All red, no green, no blue. Result: bright red.

  • color: #00ffff = No red, all green, all blue. Result: bright teal (or “aqua”).

  • color: #000000 = No red, no green, no blue. Result: black.

  • color: #ffffff = All red, all green, all blue. Result: white.

  • color: #cc99ff = A lot of red, some green, all blue. Result: lavender.

Hex codes can be uppercase or lowercase. Just don’t forget the pound sign at the beginning. There are actually several more ways to specify colors, but color names and hex codes are the most common.

Hex Codes vs. Color Names: Which is Better?

Hex codes are a bit harder to understand than color names, particularly if you’re not used to hexadecimal notation. However, it’s probably better to use hex codes anyway.

First, hex codes provide much more flexibility — you can specify about 16 million different combinations with hex codes. (Many computers can’t display that many colors, but that’s another matter.)

Second, hex codes are more stable and universal. Simple color names such as “red” and “black” will work in just about any browser, but support for fancy color names (“papayawhip”? “eggshell”?) is a bit dodgier. It’s best to stick with hex codes, which work universally.

Last updated December 17, 2023 at 11:33 am. © 2001 – 2024 by Evan Goer