Prev Next

HTML Colors

HTML supports various ways to specify colors, including named colors, RGB values, HEX codes, and HSL values. Understanding how to apply colors to text, backgrounds, and other elements enhances the visual appeal of your webpages. By learning about HTML color methods, you can create more engaging and accessible designs.

Key Topics

Named Colors

Example: Using a named color, like red, to style text directly.

<p style="color:red;">This text is red.</p>

Example: Applying a named background color, such as lightblue, to a container.

<div style="background:lightblue; padding:10px;">Light blue background</div>

Colorful Webpage Example

This example demonstrates how named colors can be used throughout a simple HTML page. Since this is a full HTML code demonstration, it is enclosed in a copy code box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Colorful Page</title>
</head>
<body style="background:beige;">
    <h1 style="color:darkblue;">Welcome to the Colorful Page</h1>
    <p style="color:green;">This paragraph uses a named color (green) for its text.</p>
    <div style="background:yellow; padding:10px;">
        <h2 style="color:maroon;">A Colorful Section</h2>
        <p>This section has a yellow background with maroon heading text.</p>
    </div>
</body>
</html>

Explanation: In the example above, a variety of named colors are used to style the background and text elements. Named colors provide a quick and readable way to add color without needing numeric values.

Applying Colors in Tables

This demonstration shows how named colors can enhance data presentation in a table. Note that this is also a full code sample with a copy box.

<h2 style="color:navy;">Colorful Data Table</h2>
<table border="1" style="border-collapse:collapse; width:50%;">
    <tr style="background:lightgray;">
        <th style="color:blue; padding:10px;">Item</th>
        <th style="color:blue; padding:10px;">Quantity</th>
    </tr>
    <tr>
        <td style="color:darkgreen; text-align:center;">Books</td>
        <td style="color:darkgreen; text-align:center;">10</td>
    </tr>
    <tr>
        <td style="color:crimson; text-align:center;">Pens</td>
        <td style="color:crimson; text-align:center;">40</td>
    </tr>
</table>

Explanation: By applying different named colors to table headers and cells, you can draw attention to important data and create a visually appealing layout.

Key Takeaways

  • Named colors provide a simple way to add color without numeric values.
  • Colors enhance the visual structure and emphasis of your webpage.
  • Applying colors to backgrounds, text, and tables can improve readability and user experience.
  • Combine named colors with other methods (RGB, HEX, HSL) for more fine-grained control.
  • Use colors thoughtfully to maintain contrast and accessibility.
Prev Next