ankitweblogic logo
W e b t u t o r i a l s

CSS3 Tutorial

Types of Style Sheet

Import Style Sheet

CSS3 Border Images

CSS2 Clip Property

CSS3 Background

CSS3 Color Property

CSS3 Linear Gradient

CSS3 Radial Gradient

CSS3 text-shadow

CSS3 word-wrap

CSS3 box-shadow

CSS text-stroke

CSS3 Nested Menu

CSS3 Combinators

CSS3 Pseudo Classes

CSS3 Pseudo Element

CSS3 2D Transform

CSS3 2D Transform

CSS3 3D Transform

CSS3 Transitions

CSS3 Animation

CSS3 Animation Exercise

CSS3 Multiple Columns

After Before Shadow

CSS3 Resize Property

CSS3 Shapes

Exercise Shape

CSS Tooltip

CSS Hover Effect

CSS3 color property

In CSS, color value can be specified using color names, hexadecimal code and RGB value. In addition, CSS3 introduce following types of color.
1. RGBA colors
2. HSL colors
3. HSLA colors
4. opacity

CSS3 RGBA Property

RGBA stands for red, green, blue, alpha. It is an extension of RGB color with an alpha channel. Alpha specifies the opacity of a color, its value can be given in between 0.0 (fully transparent) to 1.0 (full opaque).
Example: background-color using RGBA value

background-color:rgba(255,0,0,0.3);
background-color:rgba(0,255,0,0.3);
background-color:rgba(0,0,255,.3);
background-color:rgba(255,255,0,0.3);

HSL Colors

HSL stands for Hue, Saturation and Lightness. Hue is a degree on the color wheel (from 0 to 360): 0 (or 360) is red, 120 is green, 240 is blue
Saturation is a percentage value: 100% is the full color.
Lightness is also a percentage; 0% is dark (black) and 100% is white.
Example: background-color using HSL value

background-color:hsl(120,100%,75%);
background-color:hsl(120,100%,50%);
background-color:hsl(120,100%,25%);

HSLA Colors

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color. The alpha parameter defines the opacity its value is in between 0.0 (fully transparent) and 1.0 (fully opaque).
Example: background-color using HSLA value

background-color: hsla(120, 100%, 75%, 0.3);
background-color: hsla(120, 100%, 50%, 0.3);
background-color: hsla(120, 100%, 25%, 0.3);

CSS3 Opacity

The CSS3 opacity property sets the opacity for a specified RGB value. Its value must be a between 0.0 (fully transparent) and 1.0 (fully opaque).
Example: CSS3 Opacity

Red - #p1 {background-color:rgb(255,0,0);opacity:0.6;} 
Green - #p2 {background-color:rgb(0,255,0);opacity:0.6;} 
Blue - #p3 {background-color:rgb(0,0,255);opacity:0.6;}