---
id: 618a0927005553b74bfa05ae
title: Hatua ya 36
challengeType: 0
dashedName: step-36
---

# --description--

Gurudumu la rangi ni mduara ambapo rangi zinazofanana, au <dfn>hues</dfn>, ziko karibu, na tofauti ziko kando zaidi. Kwa mfano, nyekundu safi ni kati ya hues ya rose na chungwa.

Rangi mbili zilizo kinyume kutoka kwa kila moja kwenye gurudumu la rangi huitwa <dfn>complementary colors</dfn>. Ikiwa rangi mbili za complementary zitaunganishwa, hutoa kijivu. Lakini zinapowekwa kando ya nyingine, rangi hizi hutokeza utofauti mkubwa wa kuona na kuonekana kung’aa.

Katika kitendakazi cha `rgb` kwa sheria ya CSS ya `.one`, weka thamani ya nyekundu hadi juu zaidi `255` ili kutoa nyekundu safi. Katika kitendakazi cha `rgb` kwa sheria ya CSS ya `.two`, weka thamani ya kijani na bluu hadi juu zaidi `255` ili kutoa cyan.

# --hints--

Sheria yako ya CSS ya `.one` inapaswa kuwa na sifa ya `background-color` iliyowekwa kuwa `rgb(255, 0, 0)`.

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

Sheria yako ya CSS ya `.two` inapaswa kuwa na sifa ya `background-color` iliyowekwa kuwa `rgb(0, 255, 255)`.

```js
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 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 one">
      </div>
      <div class="marker two">
      </div>
      <div class="marker three">
      </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;
}

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

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

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

```
