Set RGB brightness
HTML
<div id="origin_color" style="width:100px; height:100px">Origin Color</div>
<div id="converted_color" style="width:100px; height:100px">Converted Color</div>
Input Color(e.g. #ff0000): <input type="text" id="input_color"></input><br>
Brightness(0~100): <input type="text" id="input_brightness"></input><br>
Output Color: <div id="output_color"></div>
Original brightness: <div id="original_brightness"></div>
<br>
<div id="button">Click here to convert!!</div>
<div id="origin_color2" style="width:100px; height:100px">Origin Color</div>
<div id="converted_color2" style="width:100px; height:100px">Converted Color</div>
JavaScript
$(function(){
$('#button').click(function(){
var inputColor = $('#input_color').val(),
inputBrightness = $('#input_brightness').val(),
outputColor = getNewBrightnessColor(inputColor, inputBrightness);
$('#output_color').text(outputColor);
$('#origin_color').css('background-color', inputColor);
$('#converted_color').css('background-color', outputColor);
});
});
function getNewBrightnessColor(rgbcode, brightness) {
var r = parseInt(rgbcode.slice(1, 3), 16),
g = parseInt(rgbcode.slice(3, 5), 16),
b = parseInt(rgbcode.slice(5, 7), 16),
HSL = rgbToHsl(r, g, b),
RGB;
$('#original_brightness').text(HSL[2] * 100);
RGB = hslToRgb(HSL[0], HSL[1], brightness / 100);
rgbcode = '#'
+ convertToTwoDigitHexCodeFromDecimal(RGB[0])
+ convertToTwoDigitHexCodeFromDecimal(RGB[1])
+ convertToTwoDigitHexCodeFromDecimal(RGB[2]);
return rgbcode;
}
function convertToTwoDigitHexCodeFromDecimal(decimal){
var code = Math.round(decimal).toString(16);
(code.length > 1) || (code = '0' + code);
return code;
}
/**
* Converts an RGB color value to HSL. Conversion formula
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
* Assumes r, g, and b are contained in the set [0, 255] and
* returns h, s, and l in the set [0, 1].
*
* @param Number r The red color value
* @param Number g The green color value
* @param Number b The blue color value
* @return Array The HSL representation
*/
function rgbToHsl(r, g, b){
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b...