Increase CSS brightness color on click with jquery/javascript?

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.

Answers


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


If it has a white background you could just take the opacity down allowing the white to shine through, thus a brighter shade.


Need Your Help

iCalendar "Field" list (for database schema based on iCalendar standard)

sql icalendar

my application has to deal with calendar information (incl. single occurrence, recurrence, etc.). In order to easily interface with other applications I thought that it would be a good idea to crea...

Difference between some operators "|", "^", "&", "&^". Golang

math go operators bitwise-operators

Recently I read golang specification and faced with some interesting operators: