Defining Colors In CSS

Back to Class Three page »

Defining Colors in CSS

We've already seen some properties in CSS that take color values. Here's an example:

p { color: red; } There are three different ways to specify colors in CSS.

Color Keywords

The first and easiest way to specify a color is using one of the 17 predefined color keywords.

Color	Keyword	Hex Value
black	#000000
gray	#808080
silver	#c0c0c0
white	#ffffff
maroon	#800000
red	#ff0000
purple	#800080
fuchsia	#ff00ff
green	#008000

Color	Keyword	Hex Value
lime	#00ff00
olive	#808000
yellow	#ffff00
navy	#000080
blue	#0000ff
teal	#008080
aqua	#0000ff
orange	#ffa500

Clearly most of these colors are unsuitable for normal web design. Color keywords are most useful for testing and demonstration purposes (like in these pages).

RGB Color Values

Most of you have probably heard about CMYK values for print design. RGB, which stands for red, green, and blue is the color model that monitors use. Since in web design we're primarily concerned with what web pages look like on screens, RGB is the color model we use.

RGB values are specified for each of the key colors (red, green, blue), using a value between 0 and 255 or a percentage value. A higher value means more of that color. RGB works the opposite of CMYK, in that none of the colors actually equals black and all of the colors equals white. Don't worry much about the technical details, just how to use them.

The CSS syntax for using RGB colors is a little different than we've seen before. In the example below, we are making a paragraph black, an h1 white, and an unordered list purple.

p { color: rgb(0, 0, 0); } /* black */ h1 { color: rgb(100%, 100%, 100%); } /* white */ ul { color: rgb(128, 80, 200); } /* purple */

Hexadecimal Color Values

The most common way to specify colors in CSS is to use their hexadecimal (or hex) values. Hex values are actually just a different way to represent RGB values. Instead of using three numbers between 0 and 255, you use six hexadecimal numbers. Hex numbers can be 0-9 and A-F. Hex values are always prefixed with a # symbol.

Demonstrated here are the same CSS rules as above, except with hex values.

p { color: #000000; } /* black */ h1 { color: #ffffff; } /* white */ ul { color: #8050c8; } /* purple */

If both digits of the red, green and blue values are the same, you may use the short three-digit notation. This is best shown by and example:

p { color: #f00; } /* red: same as #ff0000 */ h1 { color: #0f0; } /* lime: same as #00ff00 */ ul { color: #ff0; } /* yellow: same as #ffff00 */

How to Pick Colors

Clearly all of those numbers are not actually conducive to picking good colors. To do this, you should use a color picker program. There are a number of options to choose from.

Adobe Photoshop Color Picker

The Adobe Photoshop color palette is easily accessible on all the lab computers.

Online Color Picker

You can also use a color picker online that looks very similar to the Photoshop one. An example is the picker at http://www.colorpicker.com/.

Webmokey Color Swatches

Webmonkey has a page that simply contains a bunch of swatches of colors and their hex codes. Great for quick reference.

Digital Color Meter

To capture a color that you see on your screen, you can use the Digital Color Meter utility that is on all Macs. You can find it in Applications/Utilities/DigitalColor Meter. This utility will give you a tiny cursor, and will show you whatever colors you move over.

Adobe Kuler

Lastly, there are many tools online that allow you took pick color schemes. A great example of this type of tool is Adobe Kuler.

Experimenting with CSS Colors

You can experiment with using colors in your CSS by using the following properties: color, background-color, border-color, border-top-color, border-right-color, border-bottom-color, border-left-color.

Back to Class Three page »