How to recreate darkening content rows affect


I just purchased Site Point’s book “the principles of beautiful web design”. I have a site that would really benefit from a design used in the book. The website that shows what I am trying to accomplish is It’s the 3 toned affect from header to body to footer. (example can be found on page 57 in the site point book).

The book says that the multi color affect is done with java script and RGBA transparency. Can anyone tell me where I could find info on how to do this? I don’t know much about javascript unfortunately. My extent is cutting and pasting scripts. Not creating them.

If anyone could point me in the right direction on how to do this I would really appreciate it.


Set the background color of the element using the style property ‘backgroundColor’.
Suppose you have a DIV element with the ID ‘foo’, use the Javascript command


If you want to set another background color, define values for the levels of red, green and blue components of your color.

Be red, green and blue 3 integers between 0 and 255.
Let’s represent them in the hexadecimal base.

R=new Number(red).tostring(16);
G=new Number(green).toString(16);
B=new Number(blue).tostring(16);
// Add leading zeros to hexadecimal strings of length < 2
if (R.length<2) R='0'+R;
if (B.length<2) B='0'+B;
if (G.length<2) G='0'+G;

Now, let’s concatenate R,G,B to form the background color’s value:

document.getElementById("foo").style.backgroundColor='#' + R + G + B;

Personally, I would use HSLA rather than RGBA because I think HSL speaks more to humans than RGB.

Knowing the color wheel, 0 degrees is red, 30 is orange, 60 = yellow, etc. a full 0-359 degrees. Then Saturation and Light are measured in 0-100 as percentages. Full saturation is vibrant color and no saturation is grayscale. Lightness has to do with how much white/black is in the color.

hsl( 60, 50%, 100%) = Bright mid-saturation yellow.
What’s that in RGB? (It’s 255, 255, 128) but that doesn’t seem intuitive.

Then just tack on your A for alpha (0-1 in decimal form) and booyeah, you have a monochromatic color scheme that’s sure to match the other colors.