background-color


Just like the color CSS property, you can define a background-color:

<b style="color: white; background-color: black">I was born in the dark</b>

I was born in the dark

It's limiting to just use the named CSS colors, so here are two ways you can make any color you want.

RGB

Colors can be defined by mixing together different values of red, green, and blue, like this:

<b style="color: rgb(255, 0, 0);">I'm red</b>
<b style="color: rgb(0, 255, 0);">I'm green</b>
<b style="color: rgb(0, 0, 255);">I'm blue</b>
<b style="color: rgb(255, 255, 0);">I'm red and green</b>
<b style="color: rgb(255, 0, 255);">I'm red and blue</b>
<b style="color: rgb(0, 255, 200);">I'm green and a little blue</b>
<b style="color: rgb(255, 255, 255);">I'm red, green, and blue</b>
<b style="color: rgb(0, 0, 0);">I'm nothing</b>

I'm red I'm green I'm blue I'm red and green I'm red and blue I'm green and a little blue I'm red, green, and blue I'm nothing

There's a fun RGB slider on W3 schools you can play with to mix colors together:

Hexadecimal

An older way of mixing colors together is by defining them in hexadecimal (a number system that uses base 16 instead of base 10). It works the same as rgb, but instead of using the decimal numbers 0 to 255 it uses the hexadecimal numbers 00 to FF, like this:

<b style="color: #FF0000">I'm red</b>
<b style="color: #00FF00">I'm green</b>
<b style="color: #0000FF">I'm blue</b>
<b style="color: #FFFF00">I'm red and green</b>
<b style="color: #FF00FF">I'm red and blue</b>
<b style="color: #00FF99">I'm green and a little blue</b>
<b style="color: #FFFFFF">I'm red, green, and blue</b>
<b style="color: #000000">I'm nothing</b>

I'm red I'm green I'm blue I'm red and green I'm red and blue I'm green and a little blue I'm red, green, and blue I'm nothing


References


Challenge

Make an advertisement flyer for a birthday clown.


Solutions

Try this challenge on your own first, then come back here to see other people's solutions.

Try this challenge on your own first, then come back here to see other people's solutions.