How do I increase the brightness of an element with Javascript/jQuery?

Question

On my page I have several elements with different background colors. I wonder how I could do to when clicking a button increase the brightness of the color, make it lighter.

It is possible to do this using javascript / jquery? Like?

Answer 1

Yes, it is possible. To do this you need to convert the color to HSV to change the brightness.

See the jsFiddle example

Converting to HSV (to change the brightness)

HSV means Hue (tone), Saturation (saturation) and Value (value). As the image below shows

v, that is to say Value, corresponds to brightness.

The following function converts a value RGB for HSV.

function RgbToHsv(r, g, b) {
    var min = Math.min(r, g, b),
        max = Math.max(r, g, b),
        delta = max - min,
        h, s, v = max;

    v = Math.floor(max / 255 * 100);
    if (max == 0) return { h: 0, s: 0, v: 0 };
    s = Math.floor(delta / max * 100);
    var deltadiv = delta == 0 ? 1 : delta;
    if( r == max ) h = (g - b) / deltadiv;
    else if(g == max) h = 2 + (b - r) / deltadiv;
    else h = 4 + (r - g) / deltadiv;
    h = Math.floor(h * 60);
    if( h < 0 ) h += 360;
    return { h: h, s: s, v: v }
}

Now that I got the color in HSV I can change the value of V to change the brightness.

The next step is to get the value in RGB to update the style of the element. The following function converts from HSV for RGB

function HsvToRgb(h, s, v) {
    h = h / 360;
    s = s / 100;
    v = v / 100;

    if (s == 0)
    {
        var val = Math.round(v * 255);
        return {r:val,g:val,b:val};
    }
    hPos = h * 6;
    hPosBase = Math.floor(hPos);
    base1 = v * (1 - s);
    base2 = v * (1 - s * (hPos - hPosBase));
    base3 = v * (1 - s * (1 - (hPos - hPosBase)));
    if (hPosBase == 0) {red = v; green = base3; blue = base1}
    else if (hPosBase == 1) {red = base2; green = v; blue = base1}
    else if (hPosBase == 2) {red = base1; green = v; blue = base3}
    else if (hPosBase == 3) {red = base1; green = base2; blue = v}
    else if (hPosBase == 4) {red = base3; green = base1; blue = v}
    else {red = v; green = base1; blue = base2};

    red = Math.round(red * 255);
    green = Math.round(green * 255);
    blue = Math.round(blue * 255);
    return { r: red, g: green, b: blue };
} 

---

The following method can be used as an example:

function AppendColor(light) {
    $(".dark").each(function(i){
        // obtem a cor em RGB do elemento
        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];

        // converte rgb para hsv
        var hsv = RgbToHsv(red,gre,blu);

        // converte hsv para rgb modificando `v`
        var rgb = HsvToRgb(hsv.h, hsv.s, light);

        // cria uma nova div e seta a nova cor
        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())
}

// Valores para teste
AppendColor(25);
AppendColor(50);
AppendColor(75);
AppendColor(90);
AppendColor(95);
AppendColor(97);
AppendColor(99);
AppendColor(100);

Upshot: