Color on the Web

Color Theory

I don’t want to delve too deeply into Color Theory, but hopefully I can cover just enough so that you’re not too lost.

Color on your screen are based on Red, Green, and Blue as primary colors. There are different color systems that we can use to access those values, each with their own pros and cons. Your computer monitor can’t display every color, but they can display so many that the point is effectively moot (over 9 million in the RGB color space!).

Forget what you were taught in elementary school about color. Modern screens work slightly differently.

The color model, called the subtractive color model, that we learned was that red, blue, and yellow combine to make other colors. In printers the colors cyan (blue), magenta (red), and yellow can be combined to make nearly every other color.

Color on your screen are based on Red, Green, and Blue values. The color model that screens use is called the additive color model. The colors red, green, and blue add up to make white.

There are different color systems that we can use to access those values, each with their own pros and cons. Using the RGB values we can make millions of colors on the screen.

Color depth is how we describe the number of colors possible.

1-bit color depth

Only black or white, such as in a simple bit map.

4-bit color depth

16 colors, usually shades of gray, such as in classic Macintosh systems.

8-bit color depth

256 colors, as seen in early video game systems, and early web design.

16-bit color depth

65,536 (thousands) colors

24-bit color depth

16,777,216 (millions) colors, usually describes color in three chanels of 256 values for red, green, and blue.

32-bit color depth

16,777,216 (millions) colors, usually describes color in four chanels of 256 values for cyan, magenta, yellow, and key (black). Primarily used in printing.

Named Colors

A list of names for 140 colors that can be used. Using color names is possibly the worst way to choose colors.

Color Systems

When you’re in the flow and coding a site quickly, sometimes it’s easiest to just type in a color name and continue developing. The downside is you’re just limited to the named colors. If you wanted a gray that’s between silver and lightgray, you’d be out of luck. But, there are various color systems that you can use to be more specific about the color that you want. The systems that you’ll most likely use on the web are Hexadecimal, RGB, and HSL.

Hexadecimal Colors

A Decimal number is a numbering system that uses the digits 0 through 9. When you get to double digits (the number ten), then we put a 0 in the ones column (10). A Hexadecimal number uses the digits 0 through F. When you get to double digits (the number sixteen), then we put a 0 in the ones column (10). It’s okay to think this is a little strange if this is your first time encountering it.

A Hexadecimal color string start this a hash character (#) and is followed by six Hexadecimal numbers. The first two columns stand for a red value, the second two columns stand for a green value, and the last two columns stand for a blue value. Using a two digit Hexadecimal number from 00 through FF and give you 256 different values (from 0 to 255).

The Web Safe Palette

The web safe palette was developed back when video cards were limited to 8-bit color. The limit on 8-bit video cards was just 256 colors, of which 216 of them made up the web safe palette.

The value for a hex code color looks like this: #00FF00.

You create your own colors using any hexadecimal numbers from 0 though F.

rgb() color function

The rgb() color function is a CSS function that converts rgb values into a value that the browser will understand. Standard 24-bit color made up of three channels (Red, Green, and Blue), with 256 values (from 0 to 255) for each channel. You’ll most often see this format in image applications like Photoshop or GIMP. The value for an RGB color looks like this: rgb(255, 0, 0).

color: rgb(255, 255, 255);

hsl() color function

The hsl() color function is a CSS function that converts rgb values into a value that the browser will understand. The three values in HSL are Hue, Saturation, and Lightness. What you’ll see on the screen is an RBG color. The value for an HSL color looks like this:

color: hsl(120, 50%, 50%);

Color Properties

The most common color proprties that you’ll use are color, background-color, border-color.

color

color sets the color of the font for the selected element.

background-color

background-color sets the background color of the font for the selected element.

border-color

border-color sets the border color of the font for the selected element.

currentColor value keyword

The currentColor value reflects the value of the color property. If the color of the element changes so will the associated properties using the currentColor keyword.

This is styled text.

This is styled text.

This is styled text.

.currentBox {
  border: 4px solid currentColor;
}
.redBox {
  color: red;
}
.greenBox {
  color: green;
}
.blueBox {
  color: blue;
}
.redBox:hover {
  color: maroon;
}
.greenBox:hover {
  color: lime;
}
.blueBox:hover {
  color: cyan;
}

Exercises

1. Change the background-color on your web page.
2. Change the color of the text on your web page.
3. Change the background-color for all the aside elements of your web page.
4. Change the background-color for just one section of your web page.