---
id: 619b7fd56aa2253778bcf5f7
title: Hatua ya 48
challengeType: 0
dashedName: step-48
---

# --description--

Muundo wa rangi wa <dfn>HSL</dfn>, au hue, saturation, na lightness, ni njia nyingine ya kuwakilisha rangi.

Kitendakazi cha CSS cha hsl hukubali thamani 3: nambari kutoka 0 hadi 360 kwa hue, asilimia kutoka 0 hadi 100 kwa saturation, na asilimia kutoka 0 hadi 100 kwa lightness.

Ikiwa unafikiria gurudumu la rangi, hue nyekundu iko kwenye digrii 0, kijani iko kwenye digrii 120, na bluu iko kwenye digrii 240.

Saturation ni ukubwa wa rangi kutoka 0%, au kijivu, hadi 100% kwa rangi safi. Lazima uongeze alama ya asilimia `%` kwa thamani za saturation na lightness.

Lightness ni jinsi rangi angavu inavyoonekana, kutoka 0%, au nyeusi kamili, hadi 100%, nyeupe kamili, na 50% kuwa upande wowote.

Katika sheria ya `.blue`, tumia kitendakazi cha `hsl` ili kuweka sifa `background-color` kuwa bluu safi. Weka hue iwe `240`, saturation iwe `100%`, na lightness iwe `50%`.

# --hints--

Sheria yako ya CSS ya `.blue` inapaswa kuwa na sifa ya `background-color` iliyowekwa kuwa `hsl(240, 100%, 50%)`.

```js
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 255)');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
      </div>
      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
    </div>
  </body>
</html>
```

```css
h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.red {
  background-color: rgb(255, 0, 0);
}

.green {
  background-color: #007F00;
}

--fcc-editable-region--
.blue {
  background-color: rgb(0, 0, 0);
}
--fcc-editable-region--

```
