CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-07-16 21:27:57 +08:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

feat(curriculum): add interactive examples to hsl color model lesson (#62990)

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 03:54:37 -05:00 committed by GitHub
parent 0231f8973e
commit c4ae39851e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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