diff --git a/curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc51370c789be459186b4.md b/curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc51370c789be459186b4.md index 3cc4a0a51f0..a102f7fd7fe 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc51370c789be459186b4.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc51370c789be459186b4.md @@ -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 + +
This is a paragraph.
+``` + ```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 + +