Convert to HSV to change brightness
Check out the full jsFiddle code example
This version uses HSV . I will convert the original rgb value to HSV and change the v value to get a lighter color. I got RgbToHsv from Pointy's answer, I just added a little gray fix. And I got HsvToRgb on this site
When the page loads, I get the conversion of rgb to HSV by changing the value of v , converting back to rgb and changing the css 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:
Increase color values by highest color
See this example on jsFiddle
divs above represents 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>
divs below will get a light color from dark.
When I click on the dark div, it will fetch background-color , break values and send Lighthen functions. This feature will make the color easier.
function Lighthen(red, green, blue) { var max = ([red,green,blue].sort(function(l,r){return rl}))[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 you click on a dark div, the new color is calculated and changed on the corresponding 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)); });
Result
