From c4ae39851e231e3f5d40afc4c206bceee7b16977 Mon Sep 17 00:00:00 2001
From: Diem-Trang Pham <6422507+pdtrang@users.noreply.github.com>
Date: Fri, 24 Oct 2025 03:54:37 -0500
Subject: [PATCH] feat(curriculum): add interactive examples to hsl color model
 lesson (#62990)
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. 🎉
---
 .../672bc523324694be91d90d96.md               | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc523324694be91d90d96.md b/curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc523324694be91d90d96.md
index 054a43d5c84..59e83f614ba 100644
--- a/curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc523324694be91d90d96.md
+++ b/curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc523324694be91d90d96.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-hsl-color-model
 ---
 
-# --description--
+# --interactive--
 
 When styling websites, one of the most versatile and intuitive ways to work with color is by using the HSL color model. HSL stands for Hue, Saturation, and Lightness — three key components that define a color. 
 
@@ -27,18 +27,39 @@ element {
 
 Let's break this down with an example:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<p>This is a paragraph.</p>
+```
+
 ```css
+body {
+  background-color: hsla(0, 0%, 1%, 1.00);
+}
+
 p {
   color: hsl(120, 100%, 50%);
 }
 ```
 
+:::
+
 In this case, the hue is `120` degrees, which corresponds to green. The saturation is `100%`, so the green will be fully vivid. The lightness is `50%`, so it's at its normal tone — neither too dark nor too light. As a result, the text color of the paragraph will be a bright green.
 
 One of the main advantages of the HSL color model is its intuitive nature. It makes it easy to adjust a color’s vibrancy or lightness by tweaking the saturation and lightness values without having to alter the core color (hue). 
 
 For instance, if you want to create different shades or tints of the same color, you can simply adjust the lightness value.
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<div class="light">This is a light blue div.</div>
+<div class="dark">This is a dark blue div.</div>
+```
+
 ```css
 div.light {
   background-color: hsl(240, 100%, 80%);
@@ -46,9 +67,12 @@ div.light {
 
 div.dark {
   background-color: hsl(240, 100%, 20%);
+  color: hsl(0, 0%, 100%);
 }
 ```
 
+:::
+
 Here, both `div` elements are using the same hue (`240` degrees, which is blue), but one has a lightness of `80%` (a lighter shade of blue), and the other has a lightness of `20%` (a darker shade of blue).
 
 Just like the RGB model has an `rgba()` function to include transparency, the HSL model has an `hsla()` function. The fourth parameter in this function represents the alpha value, which controls the opacity of the color. Here is the basic syntax:
@@ -61,12 +85,21 @@ element {
 
 Let's take a look at an example:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<div>This is a div.</div>
+```
+
 ```css
 div {
   background-color: hsla(0, 100%, 50%, 0.5);
 }
 ```
 
+:::
+
 This code would give the `div` a semi-transparent red background, where the hue is set to `0` degrees (red), saturation is `100%`, lightness is `50%`, and alpha is `0.5` (50% opacity).
 
 The HSL color model is particularly useful when you need to create color schemes and adjust shades or tints easily.