CSS Colors
When using CSS you can specify colors in a range of different ways.
Use the predefined color names
We can also use keyword to reference color:
For example,aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.
#RRGGBB
Use hexadecimal value for each of the red, green, and blue components. Each pair is in hexadecimal notation in the range 00 - FF.
hex values are usually prefixed with #, such as #ffffff, which represents white. A "pure" blue would be written #0000FF, "pure" red is written #FF0000.
#RGB
This is a shorter form of the six-digit notation described above. In this format, each digit is replicated to get an equivalent six-digit value, for example #F7C becomes #FF77CC.
The following table lists some selected CSS Colors
| Color Name | Hex | Decimal | Color |
|---|---|---|---|
| black | #000000 | 0,0,0 | |
| green | #008000 | 0,128,0 | |
| silver | #C0C0C0 | 192,192,192 | |
| lime | #00FF00 | 0,255,0 | |
| gray | #808080 | 128,128,128 | |
| olive | #808000 | 128,128,0 | |
| white | #FFFFFF | 255,255,255 | |
| yellow | #FFFF00 | 255,255,0 | |
| maroon | #800000 | 128,0,0 | |
| navy | #000080 | 0,0,128 | |
| red | #FF0000 | 255,0,0 | |
| blue | #0000FF | 0,0,255 | |
| purple | #800080 | 128,0,128 | |
| teal | #008080 | 0,128,128 | |
| fushia | #FF00FF | 255,0,255 | |
| aqua | #00FFFF | 0,255,255 |
The gray colors:
| Color Name | Hex | Decimal | Color |
|---|---|---|---|
| darkgray | #a9a9a9 | 169,169,169 | |
| darkslategray | #2f4f4f | 47,79,79 | |
| dimgray | #696969 | 105,105,105 | |
| gray | #808080 | 128,128,128 | |
| lightgray | #d3d3d3 | 211,211,211 | |
| lightslategray | #778899 | 119,136,153 | |
| slategray | #708090 | 112,128,144 |
There are a number of functions that allow you to create a color.
| Function | Description | Example |
|---|---|---|
| rgb(r, g, b) | using the RGB model. | color: rgb(100, 100, 100) |
| rgba(r, g, b, a) | using the RGB model with an alpha value to specify opacity. 0 is fully transparent; 1 is fully opaque. | color: rgba(112, 128, 144, 0.4) |
| hsl(h, s, l) | using the hue, saturation, and lightness (HSL) model. | color: hsl(100, 100%, 22%) |
| hsla(h, s, l, a) | HSL with an alpha value to specify opacity. | color: hsla(100, 100%, 22%, 0.4) |
rgb(rrr.rr%,ggg.gg%,bbb.bb%)
This format uses RGB values in the range 0% to 100%, with decimal values allowed (e.g., 75.5%). The value for black would thus be rgb(0%,0%,0%), whereas blue would be rgb(0%,0%,100%).
rgb(rrr,ggg,bbb)
The accepted range of values is 0-255. The range is the decimal equivalent of 00-FF in hexadecimal. In this format, green would be rgb(0,255,0), and white would be represented as rgb(255,255,255).