Colors

CSS3 brings with it support for some new ways of describing colors on the page.

Before CSS3, colors are declared using hexadecimal format (#FFF, or #FFFFFF for white) or rgb() notation, providing either integers (0–255) or percentages or using named colors.

example

hexadecimal - #FFFFFF 
rgb - rgb(255,255,255) or rgb(100%,100%,100%) 
named colors - purple, lime, aqua, red

CSS3 also provides us with a number of other options: HSL, HSLA, and RGBA. The most notable change with these new color types is the ability to declare semitransparent colors.

RGBA works just like RGB, except that it adds a fourth value: alpha, the opacity level. The first three values represent red, green, and blue. For the alpha value, 1 means fully opaque, 0 is fully transparent, and 0.5 is 50% opaque. You can use any number between 0 and 1, inclusively.

form { 
	background: rgba(0,0,0,0.2) url(../images/bg-form.png) no-repeat 
	bottom center; 
}

HSL stands for hue, saturation, and lightness. For HSL you need to manipulate the saturation or brightness of a color by changing all three color values in concert, with HSL you can tweak either just the saturation, or the lightness, while keeping the same base hue.

The syntax for HSL comprises integer for hue, and percentage values for saturation and lightness.

HSL(hue, saturation, lightness)

Monitors display colors as RGB, the browser simply converts the HSL value you give it into one the monitor can display.

The hsl() declaration accepts three values:

hsl(0,100%,13%)

HSL also allows for an opacity value. HSLA is similar to HSL, just in additional it accepts the fourth opacity value.

HSLA(hue, saturation, lightness, opacity)

hsla(300, 100%, 50%, 0.5)

It is magenta with full saturation and normal lightness, which is 50% opaque.

hsla(0,100%,13%,1.0)