Question

I am creating a UI in which users have the ability to change color values of their pages. What I would like is to take the value assigned to their background color and lighten it a certain amount. I am just looking to achieve a highlight line without having to make new images every time.

Example: The user set the background color to #ECECEC. Now I want a certain elements border to become #F4F4F4 (A color closer to white).

Please let me know if their is a good way to do this with Javascript, PHP, or even jQuery.

Answer 1

A simpler solution could be to use the rgba() color constructor in CSS:

border: 1px solid rgba(255,255,255,0.7)

This would create a white border of 70% opacity. Unfortunately, this is not supported in Firefox 2, Opera 9, or any version of IE. It wouldn’t be difficult to create alternate versions for these browsers. jQuery example:

$('body').append('<div id="rgbatest" style="color:rgba(0,0,0,0);position:absolute;visibility:hidden">&nbsp;</div>"');
if(!$('#rgbatest').css('color').match(/^rgba/)){
     $('body').addClass('no-rgba');
}
$('#rgbatest').remove();

From here, you can use the .no-rgba class to override rgba colors.

#thisDiv{border: 1px solid rgba(255,255,255,0.7)}
.no-rgba #thisDiv{border: 1px solid #FFF}