Obtaining a lighter or darker color from an hex color value

We recently wrote about measuring the degree of luminosity or lightnerss in a color

In this post we will address how to make an existing color darker or lighter.

When you are defining a color palette for your website, it is sometimes very useful to be able to quickly defining a range of colors that go from the light version to the darkest one.

I found this great tool to do it on-line: http://hexcolortool.com/

Measuring the luminosity or lightness in a color

While preparing my css templates, I find sometimes that the color I am working on needs a dark background or a light background to enhance readability.

So, how do you find out if the color you have reaches the luminosity threshold?

Use math! You can take the Hex code of the color and play with it. You can find a simple javascript code to do it here: http://stackoverflow.com/questions/12043187/how-to-check-if-hex-color-is-too-black

And an explanation of what lum is, in Wikipedia: http://en.wikipedia.org/wiki/Rec._709#Luma_coefficients