Realtime RGB to HEX convertor in HTML,CSS,JS
<pre>
<code>
<h2 style="text-align: left;"><br /></h2>
<style>
.form {
float: left;
width: 90%;
margin: 0px 10%;
}
.form input {
float: left;
width: 30%;
text-align: center;
}
</style>
<body>
<div class="card m-3 mt-5">
<div class="card-content">
<div class="card-header py-4 border-0ss">
<h4 class="text-danger mb-4 pb-4">
<center>
RGB to Hex
</center>
</h4>
<label for="rgb">Enter RGB Code</label>
<form class="form mb-5">
<input class="form-control" id="input_1" maxlength="2" minlength="2" type="text" value="00" />
<input class="form-control" id="input_2" maxlength="2" minlength="2" type="text" value="00" />
<input class="form-control" id="input_3" maxlength="2" minlength="2" type="text" value="99" />
</form>
</div>
<div class="card-body">
<center>
<form>
<div class="input-group w-75">
<input class="form-control" id="hex_code" type="text" />
<div class="input-group-append">
<button class="input-group-text copy_btn">copy</button>
</div>
</div>
</form>
</center>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return (rgb && rgb.length === 4) ? "#" +
("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
}
setInterval(function() {
let input1 = $("#input_1").val();
let input2 = $("#input_2").val();
let input3 = $("#input_3").val();
var rgb_code = "rgb(" + input1 + "," + input2 + ", " + input3 + ")";
var hex_box = $("#hex_code");
var hex = rgb2hex(rgb_code);
$(hex_box).val(hex);
document.querySelector("body").style.background = hex;
}, 100)
function copy_hex() {
$(".copy_btn").click(function() {
var hex_box = $("#hex_code").val();
hex_code.select();
hex_code.setSelectionRange(0, 99999);
document.execCommand("copy");
$(this).html("copied");
setTimeout(function() {
$(".copy_btn").html("copy");
}, 2000);
});
};
copy_hex();
// form preventDefault
$("form").submit(function(event) {
event.preventDefault();
});
});
</script>
</body>
</code>
</pre>
Comments
Post a Comment