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