Lesson 5: Adding Colors in HTML

Learn to enhance your web pages with colors using various methods - from basic color names to advanced hexadecimal codes

Start Learning
Previous Lesson Next Lesson

Understanding Colors in HTML

Colors bring life to your web pages, making them more engaging and visually appealing. HTML provides several ways to specify colors:

Key Insight: Colors not only enhance aesthetics but also improve readability, guide user attention, and convey meaning.

Color Specification Methods

HTML supports three main ways to specify colors:

Method Example Description Use Cases
Color Names red, blue, green Predefined color names (140+ supported) Quick prototypes, simple designs
Hexadecimal #ff0000, #00ff00 6-digit hex code representing RGB values Professional designs, brand colors
RGB Values rgb(255, 0, 0) Red, Green, Blue values (0-255 each) Dynamic coloring, transparency effects

Common Color Names

Red
red
#ff0000
Green
green
#008000
Blue
blue
Yellow
yellow
#ffff00
Purple
purple
#800080
Cyan
cyan
#00ffff
Orange
orange
#ffa500
Pink
pink
#ffc0cb

Setting Background Colors

Background colors can be applied to the entire page or specific elements using the bgcolor attribute.

Page Background Color

Set the background color for the entire page using the bgcolor attribute in the <body> tag.

<!DOCTYPE html>
<html>
<head>
    <title>Background Color Example</title>
</head>
<body bgcolor="lightblue">
    <h1>Welcome to My Page</h1>
    <p>This page has a light blue background.</p>
</body>
</html>

Result:

Welcome to My Page

This page has a light blue background.

Element Background Color

Apply background colors to specific elements like headings, paragraphs, or tables.

<h1 bgcolor="#ffcc00">Yellow Heading</h1>
<p bgcolor="#e6f7ff">This paragraph has a light blue background.</p>
<table bgcolor="#f0f0f0" border="1">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

Result:

Yellow Heading

This paragraph has a light blue background.

Cell 1 Cell 2

Setting Text Colors

Control text color using the text attribute for the entire page or the color attribute in the <font> tag for specific text.

Global Text Color

Set the default text color for the entire page using the text attribute in the <body> tag.

<!DOCTYPE html>
<html>
<head>
    <title>Text Color Example</title>
</head>
<body bgcolor="#333" text="white">
    <h1>Dark Theme Page</h1>
    <p>All text on this page is white.</p>
</body>
</html>

Result:

Dark Theme Page

All text on this page is white.

Specific Text Color with Font Tag

Use the <font> tag to change the color of specific text elements.

<p>
    This is <font color="red">red text</font>,
    this is <font color="#00aa00">green text</font>,
    and this is <font color="blue">blue text</font>.
</p>

<p>
    <font color="purple" size="4">Purple text</font> 
    with larger size.
</p>

Result:

This is red text, this is green text, and this is blue text.

Purple text with larger size.

Interactive Color Playground

Experiment with different color combinations in real-time:

Color Configuration

Sample Content

Result Preview

Sample Heading

This is a sample paragraph demonstrating text color.

  • List item 1
  • List item 2

HTML Code

<body bgcolor="#ffffff" text="#000000">
  <h1>Sample Heading</h1>
  <p>This is a sample paragraph...</p>
</body>

Complete Example: Colorful Web Page

<!DOCTYPE html>
<html>
<head>
    <title>Colorful Web Page</title>
</head>
<body bgcolor="#f0f8ff" text="#333">
    <h1 align="center"><font color="#d35400">Welcome to My Colorful Website</font></h1>
    
    <div bgcolor="#e8f4f8" style="padding: 20px; border-radius: 10px;">
        <h2><font color="#2980b9">About This Page</font></h2>
        <p>This page demonstrates various ways to use colors in HTML.</p>
    </div>
    
    <h2><font color="#27ae60">Color Sections</font></h2>
    <table width="100%" cellpadding="10">
        <tr>
            <td bgcolor="#ffeaa7">
                <h3>Yellow Section</h3>
                <p>This section has a light yellow background.</p>
            </td>
            <td bgcolor="#dff9fb">
                <h3>Blue Section</h3>
                <p>This section has a light blue background.</p>
            </td>
        </tr>
        <tr>
            <td bgcolor="#fab1a0">
                <h3>Red Section</h3>
                <p>This section has a light red background.</p>
            </td>
            <td bgcolor="#a29bfe">
                <h3>Purple Section</h3>
                <p>This section has a light purple background.</p>
            </td>
        </tr>
    </table>
    
    <h2><font color="#e74c3c">Colorful Text</font></h2>
    <p>
        This is <font color="red">red text</font>,
        this is <font color="green">green text</font>,
        and this is <font color="blue">blue text</font>.
    </p>
</body>
</html>

Result:

Welcome to My Colorful Website

About This Page

This page demonstrates various ways to use colors in HTML.

Color Sections

Yellow Section

This section has a light yellow background.

Blue Section

This section has a light blue background.

Red Section

This section has a light red background.

Purple Section

This section has a light purple background.

Colorful Text

This is red text, this is green text, and this is blue text.

Previous Lesson Next Lesson