How to Use Color Names for Your HTML5 and CSS3 Based Web Pages - dummies

How to Use Color Names for Your HTML5 and CSS3 Based Web Pages

By Andy Harris

Using color names in CSS3 seems like the easiest solution, and, for basic colors, they work fine. However, here are some problems with color names that make them troublesome for web developers:

  • Only 16 color names will validate. Although most browsers accept hundreds of color names, only 16 are guaranteed to validate in CSS and HTML validators. See the following table for a list of those 16 colors.

  • Color names are somewhat subjective. You’ll find different opinions on what exactly constitutes any particular color, especially when you get to the more obscure colors.

  • It can be difficult to modify a color. For example, what color is a tad bluer than…?

  • They’re hard to match. Say you’re building an online shrine to your cat and you want the text to match your cat’s eye color. It’ll be hard to figure out exactly what color name corresponds to your cat’s eyes.

Hex codes are included in this table for completeness. It’s okay if you don’t understand what they’re about.

Color Hex Value
Black #000000
Silver #C0C0C0
Gray #808080
Maroon #800000
Red #FF0000
Purple #800080
Fuchsia #FF00FF
Green #008800
Lime #00FF00
Olive #808000
Yellow #FFFF00
Navy #000080
Blue #0000FF
Teal #008080
Aqua #00FFFF