← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 11 of 26

HTML RGB Colors

Every color your screen displays is really a mix of three colored lights: Red, Green, and Blue, each shining at a brightness between 0 (off) and 255 (full brightness). RGB color notation in HTML and CSS lets you dial in that exact mix directly, giving you access to millions of possible colors instead of the limited set of 140 named color keywords.

In this page:

  1. The Three Light Channels
  2. Mixing Channels for Custom Colors
  3. Shades of Gray
  4. Adding Transparency with rgba()
  5. RGB in Inline Styles and CSS Rules
Syntax
markup 
<tagname style="color: rgb(red, green, blue);">content</tagname>
<tagname style="color: rgba(red, green, blue, alpha);">content</tagname>

The Three Light Channels

rgb(red, green, blue) takes three numbers from 0 to 255 that represent the intensity of red, green, and blue light mixed together on screen.

Higher numbers mean brighter light for that channel, so rgb(255, 0, 0) is pure red at full intensity with the other two channels completely off.

Note: Think of RGB as mixing colored spotlights, not paint -- combining all three at full brightness produces white, not brown or black.
Warning: Values outside the 0-255 range are invalid and will be ignored or clamped by the browser.

Example: The Three Light Channels

markup 
<p style="color: rgb(255, 0, 0);">Pure red text</p>

Mixing Channels for Custom Colors

Combining different intensities across the three channels produces custom colors -- rgb(255, 165, 0) mixes full red with medium green and no blue to produce orange.

Millions of distinct colors are reachable this way, far beyond the 140 named CSS color keywords.

Note: Use an online color picker to find the exact rgb() values for a brand color before hand-guessing the mix.
Warning: Small changes to a single channel can shift a color noticeably, so test custom RGB mixes visually rather than assuming the math.

Example: Mixing Channels for Custom Colors

markup 
<p style="color: rgb(255, 165, 0);">Orange text</p>

Shades of Gray

Setting all three channels to the exact same value produces a shade of gray -- rgb(0, 0, 0) is black, rgb(255, 255, 255) is white, and any equal value in between, like rgb(128, 128, 128), is a mid-tone gray.

This makes RGB an easy way to build a consistent grayscale palette.

Note: Use equal RGB values for grayscale UI elements like borders and dividers to keep them perfectly neutral with no color tint.
Warning: Slightly unequal channel values that look gray at a glance can carry a faint, unintended color tint when zoomed in.

Example: Shades of Gray

markup 
<p style="color: rgb(128, 128, 128);">Mid-tone gray text</p>

Adding Transparency with rgba()

rgba(red, green, blue, alpha) adds a fourth value called alpha, ranging from 0 (fully transparent, invisible) to 1 (fully opaque, solid), letting a color blend with whatever sits behind it.

This is commonly used for semi-transparent overlays on top of images or other page content.

Note: Use rgba() with a low alpha value like 0.5 to create a translucent overlay that still lets background content show through.
Warning: An alpha value of 0 makes the color completely invisible, which can look like the background-color rule silently did nothing.

Example: Adding Transparency with rgba()

markup 
<div style="background-color: rgba(0, 0, 0, 0.5);">Semi-transparent overlay</div>

RGB in Inline Styles and CSS Rules

RGB and RGBA values work identically whether used in an HTML inline style attribute or inside an external CSS stylesheet, and can be applied to any property that accepts a color, including color, background-color, border-color, and box-shadow.

Note: Keep RGB color values consistent across a project by storing frequently used mixes in CSS custom properties instead of retyping the numbers.
Warning: Copy-pasting rgb() values between properties without checking commas and parentheses is a common source of invalid CSS syntax.

Example: RGB in Inline Styles and CSS Rules

markup 
<style>
  .box { border-color: rgb(0, 128, 255); }
</style>
<div class="box" style="color: rgb(200, 0, 0);">Styled with RGB</div>
Live Example
Related Topics

HTML HEX Colors · HTML HSL Colors · HTML Link Colors · HTML Colors

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Typing rgb values above 255 or below 0, when each channel is clamped to the 0-255 range and anything outside it is simply invalid.
  2. Forgetting that rgb(0,0,0) is black (all lights off) while rgb(255,255,255) is white (all lights at full brightness), which is the reverse of how mixing paint pigments works.
  3. Using rgba() without realizing the fourth value is opacity from 0 (fully transparent) to 1 (fully opaque), not a fourth color channel.
Chapter Summary
  • RGB colors are written as rgb(red, green, blue), with each channel ranging from 0 to 255.
  • Equal values for all three channels produce a shade of gray, from rgb(0,0,0) black to rgb(255,255,255) white.
  • rgba() adds a fourth transparency channel, letting you layer semi-transparent colors over backgrounds and images.
Browser Support

rgb() and rgba() color notation is supported in every browser back to the earliest CSS2/CSS3 implementations.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Colors Next Lesson → HTML HEX Colors

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.