| According to the W3C, a CSS color is either a | | | | just written differently to allow for differences in |
| keyword or a numerical specification. That definition | | | | how browsers handle the CSS. |
| seems simple. Colors are either keywords or | | | | Hexadecimal colors are the same RGB color numbers |
| numbers, but it's a bit more complicated than that. | | | | converted to base-16 and written as one long |
| Color Keywords | | | | number. Hexadecimal to RGB color charts make this |
| Color keywords are exactly what you might think | | | | easy to see. They are written: |
| they are - a list of words (in English) that correspond | | | | #RRGGBB |
| to colors on Web pages. There are 16 HTML 4 color | | | | Each pair of the hexadecimal triplet is a number from |
| keywords: | | | | 00 to FF (base-16), which corresponds to 0 - 255 in |
| • aqua | | | | decimal. So the color red is written: |
| • black | | | | #ff0000 |
| • blue | | | | CSS 3 Color Numbers |
| • fuchsia | | | | CSS 3 adds some additional complexity to the color |
| • gray | | | | numbers. In the CSS 3 recommendation, there is: |
| • green | | | | • the transparent keyword |
| • lime | | | | • RGBA color values |
| • maroon | | | | • HSL color values |
| • navy | | | | The transparent keyword is not exactly new to CSS |
| • olive | | | | 3. CSS 1 allowed background-colors to be marked |
| • purple | | | | transparent. Then CSS 2 extended it to the |
| • red | | | | border-color property. CSS 3 extends this keyword |
| • silver | | | | to use in any property that uses color values including |
| • teal | | | | the color property for changing text and foreground |
| • white | | | | colors. |
| • yellow | | | | An RGBA color value allows you to define the |
| To make things interesting, the W3C reports that | | | | opacity of the color. It is |
| "orange" is also a color keyword in the CSS 2 | | | | written:rgba(red,green,blue,opacity) |
| specification. Perhaps it will get added back into CSS | | | | The final number is an alpha value ranging from 0.0 to |
| 3 before it's finalized. | | | | 1.0. A color with an alpha value of 0.0 is fully |
| But it gets more complicated than that, as there's | | | | transparent and an alpha value of 1.0 is fully opaque. |
| another list of color keywords that you can use. | | | | According to the specification, if the user-agent |
| These colors are often called the Netscape Named | | | | doesn't support RGBA, it should default to RGB and |
| Colors because the Netscape browser was the first | | | | ignore the alpha value information. However, in |
| Web browser to define the color keywords and | | | | practice, this doesn't happen and the color value is |
| support them. The W3C calls this list the "SVG Color | | | | completely ignored. |
| Keywords". But whatever you call it, you need to be | | | | HSL color values refer to hue-saturation-lightness |
| careful when you use these keywords. Internet | | | | numerical codes for colors. They were added to |
| Explorer doesn't like the different spellings of gray | | | | solve some specific problems with RGB colors: |
| grey. | | | | • RGB is hardware-oriented. It references |
| Colors as Numbers | | | | CRTs and assumes that color model for displaying |
| Okay, so color keywords aren't as simple as they | | | | the colors. Most professional printers are not RGB |
| appear, but what about numbers - that should be | | | | based, but CMYK and the translation from screen to |
| fairly simple, right? Wrong. The CSS 2 specification | | | | print is not always good. |
| provides for two ways of specifying colors as | | | | • RGB is non-intuitive. In other words, most |
| numbers: | | | | people think of colors in reference to the hue (red |
| • RGB | | | | versus yellow), saturation (grey versus red), or |
| • Hexadecimal RGB | | | | lightness (dark red to red to pink) but RGB forces |
| RGB Color Numbers | | | | you to put the colors in a machine-generated way. |
| The format of an RGB color number | | | | Red in HSL would be written:hsl(0,100%,50%); |
| is:rgb(red,green,blue); | | | | HSL also has an alpha value notation - HSLA - which |
| The red,green,blue are numerical values from 0 to | | | | allows you to specify opacity with this color notation |
| 255 or percentage values from 0% to 100%. So, the | | | | just like RGBA. |
| color red is written:rgb(255,0,0)rgb(100%,0%,0%) | | | | HSL is not supported by most browsers, so it's a |
| Hexadecimal Color Numbers | | | | good idea to just remember this notation for the |
| Hexadecimal color numbers are also RGB - they are | | | | future. |