Files
freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
Naomi Carrigan d781c63fdf chore: resolve flagged Crowdin issues (#45442)
* chore: resolve bengali issues

* chore: resolve french issues

* chore: resolve hebrew issues

* chore: resolve persian issues

* chore: resolve portuguese brazilian issues

* chore: resolve russian issues

* chore: resolve spanish issues

* chore: resolve japanese issues
2022-03-19 13:26:57 +05:30

3.1 KiB

id, title, challengeType, videoUrl, forumTopicId, dashedName
id title challengeType videoUrl forumTopicId dashedName
bad87fee1348bd9aedf08719 Use Abbreviated Hex Code 0 https://scrimba.com/c/cRkpKAm 18338 use-abbreviated-hex-code

--description--

Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it.

For example, red's hex code #FF0000 can be shortened to #F00. This shortened form gives one digit for red, one digit for green, and one digit for blue.

This reduces the total number of possible colors to around 4,000. But browsers will interpret #FF0000 and #F00 as exactly the same color.

--instructions--

Go ahead, try using the abbreviated hex codes to color the correct elements.

ColorShort Hex Code
Cyan#0FF
Green#0F0
Red#F00
Fuchsia#F0F

--hints--

Your h1 element with the text I am red! should be given the color red.

assert($('.red-text').css('color') === 'rgb(255, 0, 0)');

The abbreviated hex code for the color red should be used instead of the hex code #FF0000.

assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));

Your h1 element with the text I am green! should be given the color green.

assert($('.green-text').css('color') === 'rgb(0, 255, 0)');

The abbreviated hex code for the color green should be used instead of the hex code #00FF00.

assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));

Your h1 element with the text I am cyan! should be given the color cyan.

assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');

The abbreviated hex code for the color cyan should be used instead of the hex code #00FFFF.

assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));

Your h1 element with the text I am fuchsia! should be given the color fuchsia.

assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');

The abbreviated hex code for the color fuchsia should be used instead of the hex code #FF00FF.

assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));

--seed--

--seed-contents--

<style>
  .red-text {
    color: #000000;
  }
  .fuchsia-text {
    color: #000000;
  }
  .cyan-text {
    color: #000000;
  }
  .green-text {
    color: #000000;
  }
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="fuchsia-text">I am fuchsia!</h1>

<h1 class="cyan-text">I am cyan!</h1>

<h1 class="green-text">I am green!</h1>

--solutions--

<style>
  .red-text {
    color: #F00;
  }
  .fuchsia-text {
    color: #F0F;
  }
  .cyan-text {
    color: #0FF;
  }
  .green-text {
    color: #0F0;
  }
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="fuchsia-text">I am fuchsia!</h1>

<h1 class="cyan-text">I am cyan!</h1>

<h1 class="green-text">I am green!</h1>