Increase CSS brightness color on click with jquery/javascript? -

so if have text "click me brighten" has css color property of dark green hex color "#00801a" want make when click on it, makes lighter green. likewise, if blue color, clicking on make lighter blue. want know if there way change css color without knowing actual color.

converting hsv change brigthness

see full code example on jsfiddle

this version uses hsv. convert original rgb value hsv , change value of v lighter color. got rgbtohsv pointy answer, added little fix gray. , got hsvtorgb on website

when page loads getting rgb converting hsv changing v value, convert rgb , change css of element new value.

function appendcolor(light) {     $(".dark").each(function(i){       // rgb existing elements         var color = $(this).css("background-color");         color = color.replace(/[^0-9,]+/g, "");         var red = color.split(",")[0];         var gre = color.split(",")[1];         var blu = color.split(",")[2];        // convert rgb hsv         var hsv = rgbtohsv(red,gre,blu);       // convert hsv rgb modifing `v` param         var rgb = hsvtorgb(hsv.h, hsv.s, light);        // creates new div , set new background       // appends content         color = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";         $("<div />")             .css("background", color)             .attr("title", color)             .appendto($(".light").parent());         $("<span />").html(" ").appendto($(".light").parent())     });     $("<br />").appendto($(".light").parent()) }  // tested values appendcolor(25); appendcolor(50); appendcolor(75); appendcolor(90); appendcolor(95); appendcolor(97); appendcolor(99); appendcolor(100); 

result:

---

increasing color values highest color

see example on jsfiddle

the divs on top represents dark colors (rgb) #801a00, #00801a, #1a0080 , #d2d2d2

<div id="red" class="dark red"></div> <div id="green" class="dark green"></div> <div id="blue" class="dark blue"></div> <div id="gray" class="dark gray"></div> <br />  <div id="lred" class="lred"></div> <div id="lgreen" class="lgreen"></div> <div id="lblue" class="lblue"></div> <div id="lgray" class="lgray"></div> 

the divs on bottom light color dark.

when click dark div retrieve background-color, split values , send function lighthen. function make color more light.

function lighthen(red, green, blue) {     var max = ([red,green,blue].sort(function(l,r){return r-l}))[0];     var multiplier = max;     multiplier = (multiplier / 255) + 1;      // if still dark, make lighten more     if (multiplier < 1.5) multiplier = 1.9;      // if gets white, move away bit     if ((max * multiplier) > 255)     {         multiplier = (multiplier / 230) + 1;     }      var r = math.round(red * multiplier);     var g = math.round(green * multiplier);     var b = math.round(blue * multiplier);      if (r > 255) r = 255;     if (g > 255) g = 255;     if (b > 255) b = 255;      return "rgb(" + r + "," + g + "," + b + ")"; } 

when dark div clicked, new color calculated , changed on correspondent div.

$(".dark").click(function(){     var color = $(this).css("background-color");     color = color.replace(/[^0-9,]+/g, "");     var red = color.split(",")[0];     var gre = color.split(",")[1];     var blu = color.split(",")[2];      $("#l" + $(this).attr("id"))         .css("background", lighthen(red, gre, blu)); }); 

resulting in