Home / HTML / Colors / RGB

HTML Colors RGB

What is RGB?

RGB stands for Red, Green, Blue. It's a color model that creates colors by mixing these three primary colors. Each color channel has a value from 0 to 255, where 0 means no color and 255 means maximum intensity.

RGB Color Syntax

RGB colors are specified using the rgb() function with three values:

Syntax

rgb(red, green, blue)

Each value is an integer from 0 to 255.

Basic RGB Colors

Pure Colors

Example

<p style="color: rgb(255, 0, 0);">Red (255, 0, 0)</p>
<p style="color: rgb(0, 255, 0);">Green (0, 255, 0)</p>
<p style="color: rgb(0, 0, 255);">Blue (0, 0, 255)</p>
<p style="color: rgb(0, 0, 0);">Black (0, 0, 0)</p>
<p style="color: rgb(255, 255, 255);">White (255, 255, 255)</p>

Mixed Colors

Example

<p style="color: rgb(255, 255, 0);">Yellow (255, 255, 0)</p>
<p style="color: rgb(255, 0, 255);">Magenta (255, 0, 255)</p>
<p style="color: rgb(0, 255, 255);">Cyan (0, 255, 255)</p>
<p style="color: rgb(128, 128, 128);">Gray (128, 128, 128)</p>

RGBA (RGB with Alpha/Transparency)

RGBA adds an alpha channel for transparency. The alpha value ranges from 0.0 (fully transparent) to 1.0 (fully opaque):

Example

<div style="background-color: yellow; padding: 20px;">
    <p style="background-color: rgba(255, 0, 0, 1.0);">Red - Fully opaque (1.0)</p>
    <p style="background-color: rgba(255, 0, 0, 0.7);">Red - 70% opacity (0.7)</p>
    <p style="background-color: rgba(255, 0, 0, 0.5);">Red - 50% opacity (0.5)</p>
    <p style="background-color: rgba(255, 0, 0, 0.3);">Red - 30% opacity (0.3)</p>
</div>

Common RGB Color Values

Color	RGB Value	Example
Red	rgb(255, 0, 0)	Red
Green	rgb(0, 255, 0)	Green
Blue	rgb(0, 0, 255)	Blue
Yellow	rgb(255, 255, 0)	Yellow
Cyan	rgb(0, 255, 255)	Cyan
Magenta	rgb(255, 0, 255)	Magenta
White	rgb(255, 255, 255)	White
Black	rgb(0, 0, 0)	Black
Gray	rgb(128, 128, 128)	Gray

Using RGB in CSS

RGB values can be used in any CSS property that accepts colors:

Example

<style>
    .red-text {
        color: rgb(255, 0, 0);
    }
    .blue-bg {
        background-color: rgb(0, 0, 255);
    }
    .green-border {
        border: 2px solid rgb(0, 255, 0);
    }
</style>

<p class="red-text">Red text</p>
<div class="blue-bg" style="color: white; padding: 10px;">Blue background</div>
<p class="green-border" style="padding: 10px;">Green border</p>

RGB Value Ranges

Red (R): 0 (no red) to 255 (maximum red)
Green (G): 0 (no green) to 255 (maximum green)
Blue (B): 0 (no blue) to 255 (maximum blue)
Alpha (A): 0.0 (transparent) to 1.0 (opaque) - for RGBA only

Converting Between Color Formats

RGB values can be converted to other formats:

RGB to HEX: Each RGB value (0-255) converts to a 2-digit hex value (00-FF)
RGB to HSL: Use formulas to convert RGB to HSL values
Example: rgb(255, 0, 0) = #ff0000 = hsl(0, 100%, 50%)

Best Practices

Use RGB for precise colors: More control than color names
Use RGBA for transparency: When you need semi-transparent colors
Consistent format: Stick with RGB or HEX throughout your project
Test opacity: RGBA transparency may look different on different backgrounds

← HTML Colors HEX Colors →