Easy Cheat Sheet For CSS Colors

The best way to use colors when designing your web site or blog is to manually code them. This sounds daunting at first but you’ll find it’s very easy to use.

There are several different ways to code in colors, but I find the best way is to use is either by name ("red"), RGB, hexadecimal or hex triplet.

Here’s how it works:

We’ll use a very simple css property, a. When you use a it applies to all hyperlinked text.

Quick note for those who know CSS already: You probably use a in the form of a:link, a:visited and a:hover. You can use those too if you like, but if you want a "one for all", just use a.

Named colors

a {
color: red;
}

When anything is hyperlinked, it’s red like this.

A really, really old web page listing all the possible named colors you can use is here. Bear in mind that if you elect to use these, stick to primary colors only such as green, lightgreen and so on. Using an "off" color like DarkKhaki may not be recognized by all browsers, but primary named colors are.

RGB

RGB simply means red green blue. The values for each can be from 0 to 255. An RGB of 0,0,0 is black. An RGB of 255,255,255 is white.

Example:

a {
color: rgb(0,0,255);
}

Red is 0, green is 0, blue is 255, so the color will be a "full" blue like this.

If it were:

a {
color: rgb(0,0,100);
}

..this would produce a darker blue like this.

If it were:

a {
color: rgb(255,0,255);
}

..this would produce a fuchsia color like this, because red+blue = purple.

If you know your basic color wheel, you can use RGB easily. And even if you don’t, you can go by ever-so-slight increments in color because you have 255 levels each to choose from for red, green and blue.

RGB is universally recognized across all web browsers.

Hexadecimal

This can be a big source of confusion to many, but once you understand how it works it’s actually quite easy to figure out.

Hexadecimal is six characters. Each character has a range of 16, that being from 0 (zero) to F. Zero is off. F is highest setting.

It goes like this from least-to-most:

0123456789ABCDEF

The first two characters of a hexadecimal color is red. The second two are blue. The third green.

Hexadecimal color values always start with a hash (#), then the six characters.

Here is what one looks like. I have purposely colorized them so you know which does which:

#FFFFFF

Being that all characters are F, the color produced will be white.

If all the characters were to 0 (zero), such as #000000, the color produced will be black.

#FF0000 produces RED.

#00FF00 produces BRIGHT GREEN.

#0000FF produces BLUE.

#FF00FF produces FUCHSIA (bright purple). 

If you always remember the red/green/blue, you’ll always get it right.

You can see sample hexadecimal values on the above linked color chart (in the named color section above). All named colors on that web page also have their hexadecimal values next to them. For whatever color does not work as a named value, hexadecimal will always work.

Hexadecimal color values are universally recognized across all web browsers.

Hex triplet

This has the most "scary" name but believe it or not is the easiest of the bunch to use – even easier than named colors.

A hex triplet is half of what a hexadecimal is, and looks like this:

#FFF

It starts with a hash (#) just like hexadecimal does, except there are three characters instead of six. Each character goes from 0 (zero) to F just like hexadecimal, that being 0123456789ABCDEF.

The first character represents red, the second green, the third blue.

If I want red:

#F00

If I want bright green:

#0F0

If I want blue:

#00F

If I want maroon:

#800

If I want a darker green:

#080

If I want a royal purple:

#505

If I want a plain gray:

#CCC

If I want a darker gray:

#888

If I want a charcoal gray:

#333

Once you memorize that each value goes from 0 to F, you can easily create colors at whim without even looking at a chart. This makes hex triplet so fast and so easy that you could even consider it fun (maybe)

When you code in CSS colors in this fashion, you’ll find that it’s much easier to get your designs done quickly and easily.

Final notes and tips

Windows color dialog can be used for color selection

When you are selecting a color from a standard color dialog in Windows, hexadecimal values are not shown, but RGB values are, like this:

Note the red/green/blue on the far right. This can be input easily using the RGB method noted above and you will get EXACTLY the color shown.

Using the example above, it would be typed out in CSS as:

color: rgb(121,193,198);

..which produces this color.

Does this mean you can use a program as simple as Microsoft Paint (which shows the above dialog when picking a color) to choose colors for CSS? Yes!

Try to memorize specific color values

It’s good to commit specific values to memory for specific colors as you may need to recall them from time to time.

For example, a tough one to remember is orange. However if you commit to memory that orange is a "full red" plus a "half green", you’ll always remember it.

In named, it’s simply orange.

In RGB, this is 255,128,0 (128 is roughly half of 255).

In hexadecimal, it’s #FF8800 (8 is halfway between 0 and F).

In hex triplet, #F80.

You’ll notice that aside from named colors, the hex triplet is the easiest because it requires the least to remember to get it.

Another tough one to remember is the color gold. The way I memorized this one is in RGB value only by using easy-to-remember numbers. I know that gold is "red 250" and "green 225", written out like this:

color: rgb(250,225,0);

The color produced is this. That to my eyes is gold (it would show up better on a black background but you get the idea).

Write down your own color cheat sheet

For your design you use specific colors that you like. When you get "your set", it’s best to either write it down and/or type out a cheat sheet for your own personal reference. I guarantee you will use it often.

My suggestion for cheat sheets is to make it divided into two sections, that being "font colors" and "background colors." Odds are you won’t use the same for fonts as you do for backgrounds. In addition, you might want to make a third section, "sets," for foreground/background combinations that you know work well.

Always remember that print looks different than screen

Unless you have one of those super-duper expensive monitors (we’re talking at least $2,000 or more), your monitor cannot produce real-to-life "true" color, even though it says it can.

If you are specifically picking a color for print, I strongly suggest you print out a "block" of it first to test it out. You can use something as simple as Microsoft Paint to do this with. Create a square filled with your color of choice and print it out. Chances are high it will either be too light or too dark. This does not mean there is anything wrong with your monitor. It just means certain colors look different on screen than they do printed.