Colors - HTML Tutorial

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

The previous section showed how to change the background color to yellow. That’s neat, but it raises more questions: What other colors can I use? Can I change text color? Can I style just part of a paragraph?

Text (Foreground) Color

To change text color, follow these steps:

1. Add a style attribute to the element: <element style="">
2. Inside the style attribute, specify the color using color: followed by your desired color, for example: <p style="color: red">.

   Note

   Do not include the style attribute in the closing tag (</p>).

Example:

<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 Example 1.6, we changed the page’s background color. Here, we changed the text color. Use background: for backgrounds and color: for text (foreground).

Background Color

To change an element’s background, use the background property in the style attribute. Applying it to body changes the page’s background. You can also combine foreground and background colors:

<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>

Multiple CSS properties are separated by semicolons. Forgetting a semicolon, like this:

<p style="background: yellow color: purple">

…will cause the browser to ignore the style because yellow color: purple is not valid.

Be careful: bright foreground and background combinations can be hard to read. Choose colors thoughtfully.

Inline Color Styles

Colors can be applied to inline elements as well. For example:

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

The red only applies to the strong element. To style text without changing its semantic meaning, use the span element. span is a neutral inline element ideal for styling portions of text. We’ll discuss it in “Div and Span”.

Specifying Colors

So far we’ve used color names like “red” or “green”. Browsers also accept hex codes, which allow more precise color choices.

Hex Codes

A hex code has six digits in the format #RRGGBB, where each pair specifies red, green, and blue intensity (00 to ff). Example: #ff9933 is orange.

• color: #ff0000 → bright red
• color: #00ffff → bright cyan
• color: #000000 → black
• color: #ffffff → white
• color: #cc99ff → lavender

Hex codes are more flexible than color names, providing millions of possible colors. They are also universal, working consistently across browsers.