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

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.

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

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:

ValuesDescription
huein degrees from 0 to 359. examples: 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, and 300 = magenta. You can use any value in between.
saturationas a percentage. 100% is the norm for saturation. Saturation of 100% will be the full hue, and saturation of 0 will give you a shade of gray—essentially causing the hue value to be ignored.
lightnessA percentage for lightness, with 50% being the norm. Lightness of 100% will be white, 50% will be the actual hue, and 0% will be black.
snippet
hsl(0,100%,13%)
HSLA

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)
ValuesDescription
huein degrees from 0 to 359. examples: 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, and 300 = magenta. You can use any value in between.
saturationas a percentage. 100% is the norm for saturation. Saturation of 100% will be the full hue, and saturation of 0 will give you a shade of gray—essentially causing the hue value to be ignored.
lightnessA percentage for lightness, with 50% being the norm. Lightness of 100% will be white, 50% will be the actual hue, and 0% will be black.
opacityvalue between 0 and 1
snippet
hsla(300, 100%, 50%, 0.5)

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

snippet
hsla(0,100%,13%,1.0)
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents