CSS Color Values
CSS Color Values
The basic color keywords are:
- (#00FFFF) Aqua
- (#000000) Black
- (#0000FF) Blue
- (#FF00FF) Fuchsia
- (#808080) Gray
- (#008000) Green
- (#00FF00) Lime
- (#800000) Maroon
- (#000080) Navy
- (#808000) Olive
- (#800080) Purple
- (#FF0000) Red
- (#C0C0C0) Silver
- (#FFA500) Orange
- (#008080) Teal
- (#FFFFFF) White
- (#FFFF00) Yellow
CSS 2 introduced a number of color keywords tied to the system default settings so that web developers can make their forms and such match the appearance of the user’s operating system. These are:
The exact color values of these keywords will vary depending on the operating system and browser that the user is running. The box after each keyword above shows the color as it appears on your computer.
Hexadecimal values specify the three colors of the transmitted spectrum using base 16. In base ten, there are only ten digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9. In base sixteen, there are sixteen digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, A, B, C, D, E, and F. Hexadecimal and octal (base 8) are commonly used in computer programs because it is easy to convert them into binary numbers (base 2). In terms of color, it is common to represent a given color value as consisting of three parts : red, green, and blue, which are mixed together in the specified proportion to produce the final color. A typical color expressed in hexadecimal looks like this:
Each color gets two digits, allowing for a range of 256 values between 00 (color not present) and FF (color 100% present). So, in the example above, red, green, and blue are all 100% present, and combine to make pure white. The colors are ordered RGB - red, green, blue. Together, the three values allow for 16,777,216 unique colors. A common shorthand version reduces each color to 1 hexadecimal digit instead:
This allows for 4,096 unique colors.
RGB Component Values
Like hexadecimal values, RGB components assign a numerical value to each of the three main colors. The values can be specified in two ways, using a number between 0 and 255, or using a percentage value. Thus:
rgb(255, 128, 0)
rgb(100%, 50%, 0%)
In both these examples, the colors combine to a nice orange.
Not all colors are equally safe for use in web pages. For one thing, some users have monitors which are only capable of reproducing 256 colors. Furthermore, different operating systems reproduce colors in different ways, so that what works well in a Windows environment may not work well in a Mac or Linux environment. Lastly, each CRT monitor has a different color calibration. Since you do not control the user’s monitor, there is no way to guarantee that the colors in your web page will look just the same on the user’s monitor.
Traditionally, this has led savvy web designers to restrict themselves to a “web safe” palette of 216 colors that can be reliably counted on to display well across multiple operating systems. Increasingly, however, it has become safe to use a wider range of colors, as the vast majority of users now have monitors capable of displaying thousands or millions of colors. Though the calibration problem remains, most designers would rather allow themselves greater design latitude at the expense of perfect control over the final outcome.
Also, some 10% of the population (mostly male) suffers from some form of color blindness. Because they lack the full range of light-sensitive cells in their retinas, color-blind people cannot perceive the same range of colors that others can. For example, the color Aqua (#00FFFF) is all but indistinguishable from white to those with protanope or deuteranope color blindness. Be especially careful with contrasting red-and-green designs, since the most common forms of color-blindness make it difficult or impossible to distinguish between these two colors. In some cases, therefore, choosing a particular color may make your web site less accessible to color-blind users.
This is particularly true if you rely exclusively on color cues to signal which bits of text serve as links to other pages. To maintain optimum accessibility, never rely solely on color to signify important information about the user interface.
- W3C Specification: Cascading Style Sheets, Level 1
- W3C Specification: Cascading Style Sheets, level 2 revision 1
- Colour Lovers: http://www.colourlovers.com/
- Eric Meyer’s Color Blender: http://meyerweb.com/eric/tools/color-blend/
- The Traditional Web-Safe Color Palette: http://www.techbomb.com/websafe/
- The “Web Smart” Color Palette: http://www.morecrayons.com/
- Vischeck.com’s Color-Blindness Simulator: http://www.vischeck.com/
- Considering the Color Blind, by Chuck Newman: http://www.webtechniques.com/archives/2000/08/newman/