jPaq Example - Shading Colors

Making colors darker and lighter across browsers isn't always easy, that is, unless you are using a JavaScript library like jPaq.  Below you will find a table of the three primary colors of light and two variants of each color:

50% Lighter Primary Color 50% Darker

If you haven't already figured it out, the primary colors of light are red, green, and blue.  Knowing this, all you need to do is create the colors as JavaScript objects by using their hex code (in short-hand or long-hand form).  Here is are examples of how to do this with jPaq:

Next if you want to make a color lighter or darker, you simply use the getLighter() or getDarker() functions:

Finally, if you want to make sure you can see the text over the background color, you can use the getSafeColor() function:

One last thing to note is that when you add a jPaq Color object to a string, the toString() function is called which is currently an alias of the getHexCode() function.

Applicable Parts

Related Examples

  1. Foreground vs. Background
    I think one of the biggest complaints of users and web designers is the fact that many times people use background colors that are too…