CSS3 – Design with Color Control and Opacity

CSS3 has the ability to control color opacity.

There are many degrees of translucence between total transparency and total opacity.  Web Designers often use opacity for visual appeal in conjunction with mouseover events for pop-up photo galleries as well as drop-down and flyout menus.

hex_colorsColor is a big part of a website, and you can color anything and everything using CSS.

There are 16 valid color names:

black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, and aqua.

Hex Codes

Virtually all modern screens can show at least 16.7 million colors, and CSS provides several ways to define all those colors.  The most common method of defining colors is to use a hex code.  This allows you to define a color using three pairs of hexadecimal numbers representing red, green and blue.  A zero indicates none of that color.  An ff indicates that color at full strength.  Example: #000000 is black – none of any color; #ffffff is full white – full strength of every color; #ff0000 is red – full strength, no other color; #00ff00 is green – no red, full strength green, no blue.

You can also use a three-digit shorthand syntax to express colors where each pair of digits has matching characters.  The browser actually doubles each of the digits to translate to six digits.  Example:  #000 is short for #000000; #0f0 is short for #00ff00.  The letters aren’t case-sensitive, so you can use uppercase or lowercase.

RGB Codes

rgbRGB is another way to express any of the 16.7 million colors.  Like hex, you define a color using a combination of red, green, and blue, but you use the 255 decimal range of 0 to 255, and you don’t need the # character.  The syntax used is rgb(red,green,blue).  You replace the red, green, and blue each with a whole number in the range of 0-255 to indicate the amount of that color.  Or, optionally, each number can be a percent in the range of 0% to 100%.  You can’t mix percent and numbers though.  Example:  rgb(0,0,0) is black, and it is the same as saying rgb(0%,0%,0%) or hex code #000!  There is no technical advantage or disadvantage to any particular method, it’s your call.

HSL Color

hslAnother way to express any of the 16.7 million colors available to you is Hue, Saturation, and Lightness (HSL) which is based on the concept of a hypothetical color cylinder.  The syntax for expressing color using HSL is hsl(hue, saturation, brightness).

Hue is the basic colors of the rainbow, and all the colors circle the hypothetical cylinder.  The cylinder is round, so 360 degrees around.  Red is at 0 degrees, green is at 120 degrees, blue is at 240 degrees.  At exactly 360 degrees, it goes back full circle to red.

Saturation increases as you move out from the center of the cylinder.  It is how much of the color there is.  Picture a bottle of perfectly red ink.  That would be 100% saturation, near the outside of the cylinder.  Take a drop of that ink and drop it into a glass of clear water.  It’s red, but it is at a low saturation, maybe 1%, near the inside of the cylinder.

Lightness is how much light is hitting the color.  No light is 0 (zero) and would render it black near the bottom of the cylinder.  Too much light (100) would render white at the top of that imaginary cylinder.

So looking at hsl(hue, saturation, brightness), you replace hue with hue expressed as a number indicating degrees around the cylinder with red at 0 (zero), green at 120, and blue at 240.  You can use any number in the range of 0 to 360.  You can express saturation as a number the range of 0% (no saturation) to 100% (full saturation).  Lightness, too, ranges from 0% (totally dark) to 100% (totally light) with 50% being the standard lighting.

It is important to keep in mind that hex, RGB, and HSL are just different ways of expressing the same 16.7 million colors.  There is no right way or better way.  It is up to you, the developer.

Translucent color expression is made using rgb() or hsl() coloring methods and using a fourth value for opacity.

Opacity, or transparency, and translucency all describe how much you can see through something.   The syntax for transparency is rgba(red, green, blue, opacity) or hsla(hue, saturation, lightness, opacity).  The “a” stands for alpha transparency.  The opacity value is new to CSS3 so some older browsers won’t handle them correctly.  You will want to set a background color as the default for the older browsers followed by the hsla() or rgba() values, including the opacity value.  The newer browsers will read the second value in this statement:

#wrapper {
background: white;
background: rgba(255,255,255,.8);
}

The opacity value is a number between .01 to .99 – the larger the number, the more opaque the color.  Zero is no opacity (transparent) and 1 is opaque.

Opacity property

The opacity property also has the syntax opacity: value;.  The value can be any number in the range of 0 to 1 where 0 is totally transparent and 1 is opaque.  This property is great because is applies to images and entire containing elements!

<td style=”opacity: .1″>
<image src=”images/felix.jpg” alt=”felix the cat” />
</td>

You can give each cell its own opacity value using an inline style.  You can have elements on a page that are completely invisible by using the syntax visibility: value; with either hidden or visible for the value.  It still takes up the space although it is not visible.

Use the syntax display: none; if you want to remove an element from the flow entirely. Use display: block; to make it visible.

By default, block elements are however tall they need to be to contain their content.

So, this has been a great lesson for me and I hope it helps someone else down the road.

Christina Descalzo
Kennesaw State University – HTML5 & CSS3 Certified