CSS3 Color: List of Value Syntax

This is the syntax list of color code with short explanation on each. You'll also find helpful links at the bottom of this post.

---

Color Code with Keyword

We can declare the color style with keyword, e.g blue, grey, red, purple, pink, lightblue, darkgreen, etc. The color keyword is case-insensitive : you can use capital or lowercase letters or mix them up.
#Element { color : pink }

---

Color Code with Numeric

Hexadecimal

Simple Color Map

It's a very common method to use this. There are 2⁴.2⁴.2⁴.2⁴.2⁴.2⁴ = 2²⁴ = 16,777,216 (16 millions) possibilities to create color with Hexadecimal. All this CSS3 syntax color numeric and color coordinate system (which you're about to see below this) were built to facilitate the "True Color" - 24 bit color depth. All modern computer screen can display that color depth, and equipped with even more capabilities.
#Element { color : #000000 } /* black */

Shorthand, compacting : #Element { color : #000 } /* black */

Decimal
This one is used in RGB/RGBA and HSL/HSLA. The idea is just like hexadecimal (base 16) but translated to decimal (base 10). You'll see the syntax below. The decimal number can also be substituted with percentage value.

---

Color Code with RGB and RGBA

RGB (Red-Green-Blue)

RGB Color Model

The RGB color model is an additive color model in which red, green, and blue lights are added together in various ways to reproduce a broad array of colors (source : RGB Color Model - Wikipedia). RGB is hardware oriented. It reflects the use of CRT (Cathode Ray Tube) screen.

Basic syntax for RGB : #Element { color : rgb(val_1, val_2, val_3) }
The decimal value (val_1, val_2, val_3) ranges from 0 - 255. The val_1, val_2, and val_3 specify the amount of red, blue, and green (lime), respectively.
The percentage value (val_1, val_2, val_3) ranges from 0% - 100%.

The CSS3 syntax for RGB (numeric - decimal) :
#Element { color : rgb(255, 0, 0) } /* RED */

The CSS3 syntax for RGB (percentage) :
#Element { color : rgb(0%, 0%, 100%) } /* BLUE */

---

RGBA (Red-Green-Blue-Alpha)
It's the same concept with RGB but with alpha addition. The "alpha" defines the opacity of the color. The alpha value ranges from 0 to 1. Some older browsers will ignore the opacity (alpha), since this is a "new" feature.

Basic syntax for RGBA - the alpha is placed at the end : #Element { color : rgb(val_1, val_2, val_3, alpha) }

The CSS3 syntax for RGBA (numeric) :
#Element { color : rgba(0, 255, 0, 1) } /* LIME */

The CSS3 syntax for RGBA (percentage for RGB color) :
#Element { color : rgba(0%, 100%, 0%, 0.5) } /* LIME transparent*/

---

Color Code with HSL and HSLA

HSL (Hue-Saturation-Lightness)

HSL Color Model

This color value is based on cylindrical-coordinate system for representing the RGB color. At first, this syntax will be more complicated to remember than using "vanilla" RGB (to me, hexadecimal is the simplest one). But, once you've memorized the position of the basic color, e.g blue, green, yellow, red, etc, you'll find that using HSL is more "intuitive" than RGB and Hex. Useful for drawing elements with CSS. Tinkering the gradient and all.

And just like standard RGB syntax, HSL also has HSLA : additional alpha (opacity). The alpha value also ranges from 0 to 1.

Basic syntax for HSL : #Element { color : hsl(hue, saturation, lightness) }

The hue degree value ranges from 0 to 360 (circle).
The saturation and lightness values range from 0% to 100%.

For example, this is the HSL syntax for (bright) RED color : #Element { color : hsl(0, 100%, 100%) }

HSL syntax for LIME color : #Element { color : hsl(120, 100%, 100%) }

---

HSLA (Hue-Saturation-Lightness-Alpha)

Basic syntax for HSLA : #Element { color : hsla(hue, saturation, lightness, alpha) }

As you can see the syntax above, the usage of HSLA is just like HSL, but with additional alpha (opacity) declaration.

For example, this is the HSLA value for (bright) RED color with full opacity (solid) : #Element { color : hsla(0, 100%, 100%, 1) }

This is the HSLA value for (bright) RED color with half opacity (transparent) : #Element { color : hsla(0, 100%, 100%, 0.5) }

---

The color value syntax can be declared in background, background-color, border-color, box-shadow color, etc. Any CSS property that has color value.

---

Transparent Value

This is using keyword : transparent - it basically has the same look as "none" value. But "physically" different, because the color is still there, but it's transparent. It's useful for color manipulation on text/box/background.
Basic syntax : #Element { color : transparent }

FYI, the transparent keyword value is rgba(0,0,0,0) in RGBA value.

Example :

Blurred Text

---

CSS for that is : { text-align:center; letter-spacing:5px; font-size:2em; font-weight:bold; font-family:inherit; text-shadow:0 0 7px brown; /*pay attention at this property*/ color:transparent; }

If we use "none" for color property, this what will happen :

Blurred Text

---

As you can see "none" is "interpreted" as the default color, that is black (I'm using Chrome here).

This is the CSS of that text :
{ text-align:center; letter-spacing:5px; font-size:2em; font-weight:bold; font-family:inherit; text-shadow:0 0 7px brown; /*pay attention at this property*/ color:none; }

---

In conclusion, using different syntax above depends on your taste. Some people are more familiar with RGB than HSL, some probably prefer HEX than using RGB or HSL. I, myself, like HEX color because it's easier to type (or copy-paste), no other reason.

Alright, that's about it, neat structured different coloring methods in CSS3.

---

References :

• CSS3 Color Module at W3
• CSS4 Color Module at W3 developers 
• RGB Color Model at Wikipedia
• HSL/HSV : RGB representations in cylindrical-coordinates at Wikipedia
• Web Colors at Wikipedia
• CMYK Color Model at Wikipedia

---

Helpful Links :

• ColorZilla
• Colorizer