From 04801b044d9f0c0e94c182d32697c00624b1efd4 Mon Sep 17 00:00:00 2001
From: Diem-Trang Pham <6422507+pdtrang@users.noreply.github.com>
Date: Fri, 24 Oct 2025 04:01:26 -0500
Subject: [PATCH] feat(curriculum): add interactive examples to rgb color model
 lesson (#62988)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Thank you for your contribution to the page! 👍
We are happy to accept these changes and look forward to future contributions. 🎉
---
 .../672bc51370c789be459186b4.md               | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

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
+<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.