Increase CSS brightness color on click with jquery/javascript?

Question

So if I have a text "Click Me to Brighten" that has CSS color property of some dark green hex color like "#00801a" I want to make it so that when I click on it, it makes it a lighter green. Likewise, if it were some blue color, clicking on it would make it lighter blue. Basically I want to know if there is a way to change the css color without knowing the actual color.

Answer 1

Converting to HSV to change the brigthness

See the full code example on jsFiddle

This version uses HSV. I convert the original rgb value to hsv and change the value of v to get a lighter color. I got RgbToHsv from Pointy answer, I just added a little fix for gray. And I got HsvToRgb on this website

When the page loads I am getting the rgb converting into hsv changing the v value, convert back to rgb and change the css of the element with the new value.

function AppendColor(light) {
    $(".dark").each(function(i){
      // get the RGB from 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 to hsv
        var hsv = RgbToHsv(red,gre,blu);
      // convert hsv to rgb modifing the `v` param
        var rgb = HsvToRgb(hsv.h, hsv.s, light);

      // creates a new div and set the new background
      // then appends to the 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 by highest color

See this example on jsFiddle

The divs on top represents the dark colors (rgb) #801A00, #00801A, #1A0080 and #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 the bottom will get the light color from the dark.

When I click a dark div it will retrieve the background-color, split the values and send to the function Lighthen. This function will make the 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 it would still be too dark, make it lighten more
    if (multiplier < 1.5) multiplier = 1.9;

    // if it gets to white, move away a 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 the dark div is clicked, the new color is calculated and changed on the 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