Managing Color Based Styling in Your Web Apps Powered by CSS3

CSS3 expands the color options available to web developers.

Before CSS3, web developers has a few different color formats to choose from:

 

• Hexadecimal Format
• RGB Format (red, green, blue)
• Named Colors

CSS3 extends the support for colors by offering support for defining colors in the following ways:

• HSL – Hue, Saturation and Lightness
• HSLA – (Hue, Saturation and Lightness, alpha transparency)
• RGBA (Red, green, blue, alpha transparency)
• Let’s explore them in more details.

 

Hexadecimal values

Color can be defined using hexadecimal values with values ranging from 00 to FF. It is defined by putting values for red, green, blue (in order) prepended by a hash (#).

Format #RRGGBB

e.g. – #ff00ff

 

RGB Format

RGB Format is similar to hexadecimal value format. We use base-10 values or percentages for defining the color.  Also, unlike hexadecimal value format, we use encapsulate the color value in “rgb()”.

Format: rgb(RR, GG, BB) or rgb(rr%, gg%, bb%)

e.g.: rgb(255, 0,127), or rgb(100%, 0, 50%)

Note that we cannot club absolute values with percentages (e.g. rgb(100, 5%, 0) is not acceptable).

In addition to what we define in rgb format, we can also define alpha transparency in rgba format with CSS3.

Alpha transparency is a measurement of transparency which can be declared in absolute values which can range from 0 to 1.

Format: rgb (RR, GG, BB, A) or rgb(rr%, gg%, bb%, A)

e.g.: rgb(255, 0,127, 1), or rgb(100%, 0, 50%, 0.5)

 

HSL – Hue, Saturation, and Lightness

hsl is a new way to declare color in CSS3.  The hsl format is based on selecting a hue as the base and tweaking the lightness/darkness and saturation of the hue.

hsl syntax is similar to rgb format. However, the difference is rgb is defined by specifying values for red, green and blue, whereas hsl is specified by specifying the degree of hue (ranges from 0 to 359), and percentages for saturation and lightness.

Here are some hue values for various colors:

• Red = 0
• Yellow = 60
• Green = 120
• Cyan = 180
• Blue = 240
• Magenta = 300

 

Lightness can vary from 0 to 100%, with 50% value implying the actual hue setting.

Format: hsl (hue, lightness, saturation)

e.g: rgb(300, 50%, 50%)

 

HSLA – Hue, Saturation, Lightness and Alpha Transparency

In addition to what we define in the hsl format, hsla also allows declaring alpha transparency.

Format: HSL (hue, lightness, saturation, alpha transparency)

e.g: rgba(300, 50%, 50%, 0)

 

 

Also in CSS3

• currentColor is a keyword introduced in CSS3 which accepts the values which apply to color property, and is very helpful to create bolder text on font using text shadows.

• transparent is another keyword which is used to declare transparency. It is a short form for writing rgba(0,0,0,0).

Summary

In this article, we learned about the various color based styling options available in CSS3 for web developers to use in web applications.

About the Author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com

 

 

References

http://www.w3.org/TR/css3-color/