One of the most basic systems for digital color is the RGB model.
Mixing light, not paint
Unlike mixing paints on a palette, where blending colors tends to make things darker, RGB is about mixing light. Every color you see on a screen is created by combining Red, Green, and Blue light at different intensities.
- At full intensity of all three (
rgb(255, 255, 255)), you get white. - At zero intensity for all three (
rgb(0, 0, 0)), you get black. - Any value in between creates the millions of colors your screen can display.
So RGB is additive. The more light you add, the brighter the result.
The rgb() function in CSS
In CSS, the rgb() function lets you define colors directly by specifying values for red, green, and blue.
Each channel accepts:
- A number between 0 and 255
- Or a percentage (e.g.,
rgb(100%, 0%, 0%)for pure red)
Example:
You can also include transparency with rgba(), which adds a fourth value for the alpha channel (opacity).
When to use rgb() over other formats
CSS supports several ways to define colors, like hex codes, HSL, and named colors. So why use rgb()?
Let’s see some benefits:
- Adjusting color channels directly is simple.
- It’s easier to apply transparency using
rgba(). - It aligns with design tools that often export RGB values. For popular programs like Figma, Photoshop, Sketch, or Illustrator, their default color definitions are given in RGB values.
The gist: The CSS rgb() function in the RGB color model is how you specify the amount of red, green, and blue light to get your desired color.
It’s simple, and effective for web design.
Although my blog doesn’t support comments, feel free to reply via email or X.