Question

In my app i want the users to select a base colour for elements to be displayed on a calendar. From the base colour the user has selected, i need to be able to automatically set an appropriate border colour, and an appropriate text colour.

When i mean appropriate i mean a darker tint or shade variation for the border

Are there any jquery plugins that do this already, or indeed any other plugins for another javascript library?

If not can people offer advice about how to go about doing the calculations? I’ve not got much experience in colour theory.

Thank you.

Answer 1

you can try this:

http://www.javascriptrules.com/2009/08/05/css-color-brightness-contrast-using-javascript/

or u can try this snippet:

function lighten(color, factor) {
    factor = factor || 0.4;
    var lighter = '#';
    for(var i = 1; i < 6; i += 2) {
        var part = parseInt(color.substr(i, 2), 16);
        part += Math.round((255 - part) * 0.4);
        lighter += (part < 16 ? '0' : '') + part.toString(16);
    }
    return lighter;
}
lighten('#ececec'); // returns '#f4f4f4'

or use this snippet:

function LightenColor(rgbtext, delta) {
      var r, g, b, txt;
      r= parseInt(rgbtext.substr(1, 2), 16),
      g= parseInt(rgbtext.substr(3, 2), 16),
      b= parseInt(rgbtext.substr(5, 2), 16),

      r+= delta;  if (r> 255) r= 255;  if (r< 0) r= 0;
      g+= delta;  if (g> 255) g= 255;  if (g< 0) g= 0;
      b+= delta;  if (b> 255) b= 255;  if (b< 0) b= 0;
      txt= b.toString(16);       if (txt.length< 2) txt= "0"+ txt;
      txt= g.toString(16)+ txt;  if (txt.length< 4) txt= "0"+ txt;
      txt= r.toString(16)+ txt;  if (txt.length< 6) txt= "0"+ txt;

      return "#"+ txt;
    }
    function DarkenColor(rgbtext, delta) {
      return LightenColor(rgbtext, delta* -1);
    }
LightenColor('#AF0000', 50);
DarkenColor('#AF0000', 50);