Color Convertion

Color Convertion

by MULLAINATHAN MANICKAM

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<input type="text" value="0" id="redText" /> <br />
<input type="text" value="0" id="greenText" /> <br />
<input type="text" value="0" id="blueText" /> <br />
<input type="submit" value="Submit" id="getHexa" /> <br /> <br />
<div id="initialColor"></div>
<div id="resultColor"></div> <br />

CSS

#initialColor, #resultColor {
  border: 1px solid;
  float: left;
  height: 50px;
  width: 50px;
}
#resultColor {
  margin-left: 25px;
 }
  
}

JavaScript

var redValue = greenValue = blueValue = resultHexa = '';
redValue = $("#redText").val();
greenValue = $("#greenText").val();
blueValue = $("#blueText").val();
console.log('Initial :'+ redValue, greenValue, blueValue);
$("#initialColor").css({ "background-color":"rgb("+redValue+","+greenValue+","+blueValue+")" });
$("#getHexa").click(function(e){
	e.preventDefault();
  redValue = $("#redText").val();
  greenValue = $("#greenText").val();
  blueValue = $("#blueText").val();
  console.log('Updated :'+ redValue, greenValue, blueValue);  
  if(redValue !='' && greenValue !='' && blueValue !='') {
  	resultHexa = rgbToHexa(redValue, greenValue, blueValue);
    $("#resultColor").css({ "background-color":resultHexa });
  } else {
  	alert('value sholud be not empty');
  }
});

function rgbToHexa (red, green, blue) {
	if(red > 255 || green > 255 || blue > 255) return "#000000";
    var result = '#' + ('00000' + (red << 16 | green << 8 | blue).toString(16)).slice(-6);
    console.log('Result :'+ result);
    return result;
};