CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-07-13 21:15:35 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat(curriculum): add interactive examples to rgb color model lesson (#62988)

Browse Source 
Thank you for your contribution to the page! 👍
We are happy to accept these changes and look forward to future contributions. 🎉
This commit is contained in:
Diem-Trang Pham 2025-10-24 04:01:26 -05:00 committed by GitHub
parent 5ce7e15ed7
commit 04801b044d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc51370c789be459186b4.md
View File

@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-is-the-rgb-color-model
---
# --description--
# --interactive--
When working with colors in CSS, understanding the RGB color model is essential. RGB stands for Red, Green, and Blue — the primary colors of light. These three colors are combined in different intensities to create a wide range of colors.
@ -27,22 +27,40 @@ element {
The values for red, green, and blue can range from `0` to `255`, where `0` represents the absence of that color, and `255` represents full saturation. Here is an example of how you might use the `rgb()` function in CSS:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css" />
<p>This is a paragraph.</p>
```
```css
p {
color: rgb(255, 0, 0);
}
```
:::
This code would change the text color of the paragraph to red because the red value is set to `255`, while green and blue are set to `0`.
CSS also provides the `rgba()` function, which adds a fourth value —alpha— that controls the transparency of the color. The alpha value ranges from `0` (completely transparent) to `1` (completely opaque). Here is an example of using `rgba()`:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css" />
<div>This is a div.</div>
```
```css
div {
background-color: rgba(0, 0, 255, 0.5);
}
```
:::
This code would apply a semi-transparent blue background to a `div` element because the red and green values are set to `0`, the blue value is set to `255`, and the alpha value is set to `0.5` (50% transparency).
The RGB color model is especially useful for digital media because it directly corresponds to how screens display colors. Monitors and displays use tiny red, green, and blue pixels to create the colors you see. By controlling the intensity of these pixels through RGB values, you can achieve a wide range of colors for your web design.