Prev Next

HTML Colors - HEX

HEX color codes are a hexadecimal representation of RGB values. A HEX code looks like #RRGGBB, where RR, GG, and BB are two-digit hexadecimal numbers (00 to FF) representing the intensity of red, green, and blue. HEX codes are widely used in web design because they are compact and easy to copy and paste.

Key Topics

Basic HEX Usage

Example: Using a HEX value like #FF0000 for bright red text.

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

Example: Applying a HEX code for a background, e.g., #00FF00 for green.

<div style="background:#00FF00; padding:10px;">Green background</div>

A HEX-Themed Page

This example demonstrates how HEX codes can be used throughout a webpage. 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>HEX Color Page</title>
</head>
<body style="background:#F0F0F0;">
    <h1 style="color:#0033CC;">Welcome to the HEX Palette</h1>
    <p style="color:#339900;">This paragraph uses a HEX value for a greenish hue.</p>
    <div style="background:#FF33CC; padding:10px;">
        <h2 style="color:#FFFFFF;">A Vibrant Section</h2>
        <p>This section uses #FF33CC (a pinkish shade) with white text for contrast.</p>
    </div>
</body>
</html>

Explanation: HEX codes offer a convenient way to represent colors. They are compact and widely recognized in web design, making them easy to share and standardize.

Applying HEX in Tables

This demonstration shows how HEX codes can enhance data presentation in a table. Another full code sample is provided below.

<h2 style="color:#660066;">HEX Data Table</h2>
<table border="1" style="border-collapse:collapse; width:50%;">
    <tr style="background:#CCCCCC;">
        <th style="color:#000000; padding:10px;">Item</th>
        <th style="color:#000000; padding:10px;">Quantity</th>
    </tr>
    <tr>
        <td style="color:#006600; text-align:center;">Apples</td>
        <td style="color:#006600; text-align:center;">25</td>
    </tr>
    <tr>
        <td style="color:#990000; text-align:center;">Cherries</td>
        <td style="color:#990000; text-align:center;">40</td>
    </tr>
</table>

Explanation: By selecting HEX codes for table headers and cells, you can create a consistent color scheme that enhances the visual structure of your data.

Key Takeaways

  • HEX codes are a compact representation of RGB values.
  • They are widely used and supported, making them a standard in web design.
  • HEX codes allow for easy copying, pasting, and sharing of exact colors.
  • Use HEX codes to maintain a consistent color scheme across your project.
  • Combine HEX with other color models as needed for maximum flexibility.
Prev Next