Back to Freecodecamp

Use Hex Code for Specific Colors

curriculum/challenges/english/blocks/basic-css/bad87fee1348bd9aedf08726.md

latest2.0 KB
Original Source

--description--

Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or hex code for short.

We usually use <dfn>decimals</dfn>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <dfn>Hexadecimals</dfn> (or <dfn>hex</dfn>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in hexadecimal, giving us 16 total possible values. You can find more information about <a href="https://www.freecodecamp.org/news/hexadecimal-number-system/" target="_blank" rel="noopener noreferrer nofollow">hexadecimal numbers here</a>.

In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, #000000 is black and is also the lowest possible value. You can find more information about the <a href="https://www.freecodecamp.org/news/rgb-color-html-and-css-guide/#whatisthergbcolormodel" target="_blank" rel="noopener noreferrer nofollow">RGB color system here</a>.

css
body {
  color: #000000;
}

--instructions--

Replace the word black in our body element's background-color with its hex code representation, #000000.

--hints--

Your body element should have the background-color of black.

js
const body = document.querySelector('body');
const backgroundColor = window.getComputedStyle(body)['background-color']; 
assert.strictEqual(backgroundColor, 'rgb(0, 0, 0)');

The hex code for the color black should be used instead of the word black.

js
assert.match(code, /body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi);

--seed--

--seed-contents--

html
<style>
  body {
    background-color: black;
  }
</style>

--solutions--

html
<style>
  body {
    background-color: #000000;
  }
</style>