ExplorerAnimals

Parrot Color Ways

Four ways to write a color: names, hex, rgb and hsl.

Goal: Use a color name, a hex code, an rgb() and an hsl() on the parrot.

Auto run

Your goals

0 of 4 done

Color the head with a color NAME (try tomato)not completed yet
Color the body with the HEX code #22c55enot completed yet
Color the wing with rgb(59, 130, 246)not completed yet
Color the beak with hsl(45, 100%, 51%)not completed yet

index.htmlhtml

<div class="jungle">
  <div class="parrot">
    <div class="body"></div>
    <div class="wing"></div>
    <div class="head"></div>
    <div class="beak"></div>
  </div>
</div>

style.csscss

.jungle {
  position: relative;
  height: 260px;
  border-radius: 20px;
  background-color: #ecfdf5;
}

.parrot { position: absolute; left: 90px; top: 40px; width: 160px; height: 180px; }

.body {
  position: absolute;
  left: 30px; top: 60px;
  width: 90px; height: 120px;
  border-radius: 45% 45% 50% 50%;
  background-color: white; /* use a hex code */
}

.wing {
  position: absolute;
  left: 78px; top: 84px;
  width: 44px; height: 80px;
  border-radius: 50%;
  background-color: white; /* use rgb() */
}

.head {
  position: absolute;
  left: 44px; top: 16px;
  width: 62px; height: 62px;
  border-radius: 50%;
  background-color: white; /* use a color name */
}

.beak {
  position: absolute;
  left: 100px; top: 44px;
  width: 26px; height: 18px;
  border-radius: 4px 60% 60% 4px;
  background-color: white; /* use hsl() */
}

preview

Up next

Nest Family Tree

Next activity →