Prev Next

HTML Colors - RGB

RGB (Red, Green, Blue) values provide a numeric method to define colors. Each color channel (R, G, B) takes a value between 0 and 255, allowing you to mix them for a precise result. RGB colors are versatile and can represent millions of different shades, making them essential for fine-tuned color design.

Key Topics

Basic RGB Usage

Example: Using an RGB value like rgb(255,0,0) for bright red text.

<p style="color:rgb(255,0,0);">This text is bright red.</p>

Example: Applying RGB to backgrounds, e.g., rgb(0,255,0) for a green background.

<div style="background:rgb(0,255,0); padding:10px;">Green background</div>

Colorful Page with RGB

This example shows how to use RGB values throughout a 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>RGB Color Page</title>
</head>
<body style="background:rgb(230,230,230);">
    <h1 style="color:rgb(0,100,200);">Welcome to the RGB World</h1>
    <p style="color:rgb(100,200,0);">This paragraph uses an RGB value for a greenish hue.</p>
    <div style="background:rgb(200,0,200); padding:10px;">
        <h2 style="color:rgb(255,255,255);">A Magenta Section</h2>
        <p>This section uses magenta (200,0,200) with white text for contrast.</p>
    </div>
</body>
</html>

Explanation: By mixing different values of Red, Green, and Blue, you can achieve precise colors. In the example, various RGB combinations are used to create a cohesive, colorful design.

RGB in Tables

This demonstration shows how RGB values can be applied to tables for color-coding data. Also a full code sample with a copy box.

<h2 style="color:rgb(0,0,150);">RGB Data Table</h2>
<table border="1" style="border-collapse:collapse; width:50%;">
    <tr style="background:rgb(200,200,200);">
        <th style="color:rgb(0,0,0); padding:10px;">Item</th>
        <th style="color:rgb(0,0,0); padding:10px;">Quantity</th>
    </tr>
    <tr>
        <td style="color:rgb(0,150,0); text-align:center;">Apples</td>
        <td style="color:rgb(0,150,0); text-align:center;">25</td>
    </tr>
    <tr>
        <td style="color:rgb(150,0,0); text-align:center;">Cherries</td>
        <td style="color:rgb(150,0,0); text-align:center;">40</td>
    </tr>
</table>

Explanation: Using RGB in tables lets you pick subtle shades that differentiate rows and values, improving the clarity and aesthetics of your data presentation.

Key Takeaways

  • RGB values provide fine-grained control over colors by adjusting red, green, and blue channels.
  • Use RGB for a wider range of custom shades that named colors cannot provide.
  • Combine RGB with other color models (HEX, HSL) as needed for design flexibility.
  • Apply RGB colors thoughtfully to maintain good contrast and accessibility.
  • Experiment with different RGB values to discover unique color combinations.
Prev Next