# CSS Colors (RGB)

Colors in CSS are displayed using a predefined color name or a combination of red, green, and blue color values. The RGB color values can be specified in decimal, hexadecimal, or as percentages. Using this method, over 16 million different colors can be obtained.

## Example

    <div style="background-color:
      rgb(255,0,0);">
    </div>

The following table lists some of the more common color names and their hexadecimal equivalents. These color names are recognized by the W3C as "web standard".

Color | Name | Hex
--- | --- | ---
| `black` | `#000000`
| `navy` | `#000080`
| `blue` | `#0000ff`
| `green` | `#008000`
| `teal` | `#008080`
| `lime` | `#00ff00`
| `aqua` | `#00ffff`
| `maroon` | `#800000`
| `purple` | `#800080`
| `olive` | `#808000`
| `gray` | `#808080`
| `silver` | `#c0c0c0`
| `red` | `#ff0000`
| `fuchsia` | `#ff00ff`
| `yellow` | `#ffff00`
| `white` | `#ffffff`

# CSS Colors (RGBA)

The CSS3 specification adds the ability to specify the "alpha", or opacity, of a color. The alpha is specifed as a decimal number between 0.0 (transparent) and 1.0 (opaque).

## Example

    <div style="background-color:
      rgba(255,0,0,0.2);">
    </div>

The following boxes show the color "red" at different alpha levels:

0.2 | 0.4 | 0.6 | 0.8 | 1.0

# CSS Colors (HSL)

The CSS3 specification adds the ability to specify colors using HSL (Hue, Saturation, Lightness). HSL takes three values:
- Hue is the degree on the color wheel: 0 = red, 120 = green, 240 is blue
- Saturation is a percentage, where 100% is the full color
- Lightness is a percentage, where 0% is dark (black) and 100% is light (white)

## Example

    <div style="background-color:
      hsl(0,100%,50%);">
    </div>

The following boxes show the three basic colors for HSL:

| hsl(0,100%,50%)
| hsl(120,100%,50%)
| hsl(240,100%,50%)

# CSS Colors (HSLA)

The CSS3 specification adds the ability to specify colors using HSLA (Hue, Saturation, Lightness, Alpha). HSLA takes four values:
- Hue is the degree on the color wheel: 0 = red, 120 = green, 240 is blue
- Saturation is a percentage, where 100% is the full color
- Lightness is a percentage, where 0% is dark (black) and 100% is light (white)
- Alpha is a decimal number between 0.0 (transparent) and 1.0 (opaque)

## Example

    <div style="background-color:
      hsla(0,100%,50%,0.2);">
    </div>

The following boxes show the color "red", hsl(0,100%,50%), at different alpha levels:

0.2 | 0.4 | 0.6 | 0.8 | 1.0

# CSS Color Names

The following table lists the color names supported by most browsers and their hexadecimal equivalents. Except for those also listed in the table above, these color names are not recognized by the W3C as "web standard".

Color | Name | Hex
--- | --- | ---
| AliceBlue | `#f0f8ff`
| AntiqueWhite | `#faebd7`
| Aqua | `#00ffff`
| Aquamarine | `#7fffd4`
| Azure | `#f0ffff`
| Beige | `#f5f5dc`
| Bisque | `#ffe4c4`
| Black | `#000000`
| BlanchedAlmond | `#ffebcd`
| Blue | `#0000ff`
| BlueViolet | `#8a2be2`
| Brown | `#a52a2a`
| BurlyWood | `#deb887`
| CadetBlue | `#5f9ea0`
| Chartreuse | `#7fff00`
| Chocolate | `#d2691e`
| Coral | `#ff7f50`
| CornflowerBlue | `#6495ed`
| Cornsilk | `#fff8dc`
| Crimson | `#dc143c`
| Cyan | `#00ffff`
| DarkBlue | `#00008b`
| DarkCyan | `#008b8b`
| DarkGoldenRod | `#b8860b`
| DarkGray | `#a9a9a9`
| DarkGreen | `#006400`
| DarkKhaki | `#bdb76b`
| DarkMagenta | `#8b008b`
| DarkOliveGreen | `#556b2f`
| Darkorange | `#ff8c00`
| DarkOrchid | `#9932cc`
| DarkRed | `#8b0000`
| DarkSalmon | `#e9967a`
| DarkSeaGreen | `#8fbc8f`
| DarkSlateBlue | `#483d8b`
| DarkSlateGray | `#2f4f4f`
| DarkTurquoise | `#00ced1`
| DarkViolet | `#9400d3`
| DeepPink | `#ff1493`
| DeepSkyBlue | `#00bfff`
| DimGray | `#696969`
| DodgerBlue | `#1e90ff`
| FireBrick | `#b22222`
| FloralWhite | `#fffaf0`
| ForestGreen | `#228b22`
| Fuchsia | `#ff00ff`
| Gainsboro | `#dcdcdc`
| GhostWhite | `#f8f8ff`
| Gold | `#ffd700`
| GoldenRod | `#daa520`
| Gray | `#808080`
| Green | `#008000`
| GreenYellow | `#adff2f`
| HoneyDew | `#f0fff0`
| HotPink | `#ff69b4`
| IndianRed | `#cd5c5c`
| Indigo | `#4b0082`
| Ivory | `#fffff0`
| Khaki | `#f0e68c`
| Lavender | `#e6e6fa`
| LavenderBlush | `#fff0f5`
| LawnGreen | `#7cfc00`
| LemonChiffon | `#fffacd`
| LightBlue | `#add8e6`
| LightCoral | `#f08080`
| LightCyan | `#e0ffff`
| LightGoldenRodYellow | `#fafad2`
| LightGrey | `#d3d3d3`
| LightGreen | `#90ee90`
| LightPink | `#ffb6c1`
| LightSalmon | `#ffa07a`
| LightSeaGreen | `#20b2aa`
| LightSkyBlue | `#87cefa`
| LightSlateGray | `#778899`
| LightSteelBlue | `#b0c4de`
| LightYellow | `#ffffe0`
| Lime | `#00ff00`
| LimeGreen | `#32cd32`
| Linen | `#faf0e6`
| Magenta | `#ff00ff`
| Maroon | `#800000`
| MediumAquaMarine | `#66cdaa`
| MediumBlue | `#0000cd`
| MediumOrchid | `#ba55d3`
| MediumPurple | `#9370d8`
| MediumSeaGreen | `#3cb371`
| MediumSlateBlue | `#7b68ee`
| MediumSpringGreen | `#00fa9a`
| MediumTurquoise | `#48d1cc`
| MediumVioletRed | `#c71585`
| MidnightBlue | `#191970`
| MintCream | `#f5fffa`
| MistyRose | `#ffe4e1`
| Moccasin | `#ffe4b5`
| NavajoWhite | `#ffdead`
| Navy | `#000080`
| OldLace | `#fdf5e6`
| Olive | `#808000`
| OliveDrab | `#6b8e23`
| Orange | `#ffa500`
| OrangeRed | `#ff4500`
| Orchid | `#da70d6`
| PaleGoldenRod | `#eee8aa`
| PaleGreen | `#98fb98`
| PaleTurquoise | `#afeeee`
| PaleVioletRed | `#d87093`
| PapayaWhip | `#ffefd5`
| PeachPuff | `#ffdab9`
| Peru | `#cd853f`
| Pink | `#ffc0cb`
| Plum | `#dda0dd`
| PowderBlue | `#b0e0e6`
| Purple | `#800080`
| Red | `#ff0000`
| RosyBrown | `#bc8f8f`
| RoyalBlue | `#4169e1`
| SaddleBrown | `#8b4513`
| Salmon | `#fa8072`
| SandyBrown | `#f4a460`
| SeaGreen | `#2e8b57`
| SeaShell | `#fff5ee`
| Sienna | `#a0522d`
| Silver | `#c0c0c0`
| SkyBlue | `#87ceeb`
| SlateBlue | `#6a5acd`
| SlateGray | `#708090`
| Snow | `#fffafa`
| SpringGreen | `#00ff7f`
| SteelBlue | `#4682b4`
| Tan | `#d2b48c`
| Teal | `#008080`
| Thistle | `#d8bfd8`
| Tomato | `#ff6347`
| Turquoise | `#40e0d0`
| Violet | `#ee82ee`
| Wheat | `#f5deb3`
| White | `#ffffff`
| WhiteSmoke | `#f5f5f5`
| Yellow | `#ffff00`
| YellowGreen | `#9acd32`