Set RGB brightness

by falldeaf

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" value="#09e6e6"></input><br>
Brightness(0~100): <input type="text" id="input_brightness" value="25"></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>

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 componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function getNewBrightnessColor(hex, brightness) {
    var rgb = hexToRgb(hex)
    var HSL = rgbToHsl(rgb.r, rgb.g, rgb.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]);
 
 		console.log(RGB);
 		console.log(rgbToHex(parseInt(RGB[0]), parseInt(RGB[1]), parseInt(RGB[2])));
 
    return rgbcode;
}

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

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
 *...