RGB Colors: The Additive Color Mixing System

Learn about the RGB color system in CSS. Understand additive color mixing, channel values (0-255), and styling syntax.

Introduction

If you take a magnifying glass and hold it close to your computer screen, you will see that every pixel is composed of three tiny light bars: Red, Green, and Blue. By changing the intensity of these three lights, your screen can produce millions of distinct colors.

This is the basis of the RGB Color System. In CSS, the rgb() function lets you control these light intensities programmatically. Because it maps directly to how monitor hardware renders colors, understanding RGB is essential for programmers working with dynamic graphics, image filters, and modern UI transitions.

What You Will Learn

How the additive color mixing system works.
The syntax of the CSS rgb() function.
How to calculate colors using values from $0$ to $255$.
Simulating primary, secondary, and grayscale colors in RGB.

Prerequisites

CSS Colors: Foreground, Background, and Transparency Systems

Detailed Explanation: Additive Color Mixing

The RGB system is an additive color model. This means that colors are created by adding light beams together:

Adding all lights together: Red + Green + Blue = White.
Turning all lights off: No Red, no Green, no Blue = Black.
This is the opposite of painting (subtractive color), where mixing all colors creates a dark brown or black.

The `rgb()` Function Syntax

In CSS, you specify an RGB color using the rgb() function:

selector {
  color: rgb(red_value, green_value, blue_value);
}

Each value represents the intensity of that color channel, specified as an integer from 0 (off) to 255 (maximum intensity).
Alternatively, you can use percentages from 0% to 100% (e.g. rgb(100%, 0%, 0%) is red).

RGB Color Mixing Table

| Color | Red Channel | Green Channel | Blue Channel | CSS Code | | :--- | :---: | :---: | :---: | :--- | | Pure Red | 255 | 0 | 0 | rgb(255, 0, 0) | | Pure Green| 0 | 255 | 0 | rgb(0, 255, 0) | | Pure Blue | 0 | 0 | 255 | rgb(0, 0, 255) | | Yellow | 255 | 255 | 0 | rgb(255, 255, 0) | | White | 255 | 255 | 255 | rgb(255, 255, 255) | | Black | 0 | 0 | 0 | rgb(0, 0, 0) | | Medium Gray| 128 | 128 | 128 | rgb(128, 128, 128) |

Note: Whenever the red, green, and blue values are identical (e.g., rgb(80, 80, 80)), the result will always be a neutral shade of gray.

Visual Learning Diagram (Mermaid)

graph TD
    A[RGB Color Mixing]
    A --> R[Red Light: 0-255]
    A --> G[Green Light: 0-255]
    A --> B[Blue Light: 0-255]
    
    R & G --> Yellow[Yellow Light]
    G & B --> Cyan[Cyan Light]
    R & B --> Magenta[Magenta Light]
    R & G & B --> White[White Light]

Code Examples

Example 1: Primary and Secondary Colors

Let's style alert boxes using explicit RGB color codes:

/* Success Alert (Vibrant Green) */
.alert-success {
  background-color: rgb(209, 250, 229); /* Light green */
  color: rgb(6, 95, 70);                 /* Dark green text */
  border: 1px solid rgb(52, 211, 153);
}

/* Warning Alert (Warm Yellow/Orange) */
.alert-warning {
  background-color: rgb(254, 243, 199); /* Light yellow */
  color: rgb(146, 64, 14);               /* Dark brown text */
}

Example 2: Modern CSS3 Space-Separated Syntax

Modern browsers support a new, clean syntax format that omits commas. This aligns with the new color functions like color(display-p3):

.card-header {
  /* New syntax: space-separated values */
  background-color: rgb(30 41 59); /* Same as rgb(30, 41, 59) */
  color: rgb(248 250 252);
}

Summary

The RGB color system utilizes additive light mixing (Red, Green, Blue) to render colors based on channel intensities from 0 to 255. By combining these three light values inside the rgb() function, developers can generate over 16.7 million unique color shades.

Next Tutorial

How do we add transparency adjustments to our light mixing models? Let's check: RGBA Colors.

← Back to Syllabus