Howdy, Have you ever thought if you could create your own Hex to rgb color converter and vice versa at that time you don't need to search on google to check the RGB value of the Hex value of any color code?
Today we are going to create our own Hex to RGB color converter and also we will create RGB color to HEX color converter using HTML, CSS, and jQuery.
First of all, we need to understand CSS color codes.
CSS Color Codes Secret |
|||
|---|---|---|---|
| RGB | HEX(3) | HEX(6) | Name |
| 255,255,255 | #FFF | #FFFFFF | White |
| 0,0,0 | #000 | #000000 | Black |
| 255,0,0 | #F00 | #FF0000 | Red |
| 0,255,0 | #0F0 | #00FF00 | Green |
| 0,0,255 | #00F | #0000FF | Blue |
Let's see total number of color codes in HTML
RGB total colors are 255*255*255 = 16,581,375
HEX(3) total colors are 16*16*16 = 4096
Hex(6) total colors are 16*16*16*16*16*16 = 16,777,216
total numbers of colors by name are about 140
Let's create our own RGB color to HEX color converter
First of all we will create a from with input type color and we will get the color value using Jquery.
I have used some css code also use bootstrap for making it good looking. I have used internal css and jquery codes becaues our web page isn't that codes. The codes are simple and easily understandable codes.
RGB2HEX web page code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RGB2HEX</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
button{color: white;
background-color: rgb( 0, 170, 254 );
box-shadow: 2px 5.66px 20px 0px rgba(136, 136, 136, 0.2);
border-radius: 0;
outline: 0;
width: 50%;
padding: 12px;
margin-top: 50px;
border: none;
outline: none;
font-weight: bold;
cursor: pointer;}
.row .col-lg-6{
box-shadow: 0px 0px 5px 0px rgba(168, 157, 157, 0.31);
padding: 35px 20px;
}
.row:hover .col-lg-6{
box-shadow: 2px 5.66px 20px 0px rgba(136, 136, 136, 0.2);
}
</style>
</head>
<div class="container" style="margin-top: 80px;">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1">
<form action="" method="POST" role="form" id="frm">
<legend style="margin-bottom: 50px;">Choose color for convert into HEX color</legend>
<div class="form-group">
<label for="">Select Color</label>
<input type="color" class="form-control" id="colorcode">
</div>
<div class="text-center">
<button type="submit">Submit</button>
</div>
</form>
<div class="msg"></div>
</div>
</div>
</div>
<script>
$(document).ready(function (event) {
$("#frm").submit(function(event) {
event.preventDefault();
var hi = $("#colorcode").val();
$(".msg").html(`<h3 class="text-center">HEX COLOR = ${hi} </h3>`)
alert(hi);
});
});
</script>
</body>
</html>
Jquery code explaine:- After submiting the form, form will not redirect anywhere because we have used event.preventDefault(); this function stop redirecting the web page. we can also use return false; for not to redirect our page. After that we have storage form value into a variable and insert the value into html code and also alert the form value; I hope it was easy to understand RGB2HEX codes. If you want preview of this RGB2HEX webpage click on the below link.
Get Demo for RGB to HEX color converter
Let's create our own HEX color to RGB color converter
While create RGB to HEX we have used input type color in the form now we will use input type text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HEX2RGB</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
button{color: white;
background-color: rgb( 0, 170, 254 );
box-shadow: 2px 5.66px 20px 0px rgba(136, 136, 136, 0.2);
border-radius: 0;
outline: 0;
width: 50%;
padding: 12px;
margin-top: 50px;
border: none;
outline: none;
font-weight: bold;
cursor: pointer;}
.row .col-lg-6{
box-shadow: 0px 0px 5px 0px rgba(168, 157, 157, 0.31);
padding: 35px 20px;
}
.row:hover .col-lg-6{
box-shadow: 2px 5.66px 20px 0px rgba(136, 136, 136, 0.2);
}
input[type=text]{
outline: 0;
border-radius: 0;
background-color: rgb( 235, 248, 255 );
padding: 24px;
font-size: 18px;
color: #001F37;
}
::placeholder{
color: #001F37 !important;
opacity: .8;
font-size: 18px;
text-transform: none;
}
</style>
</head>
<body>
<div class="container" style="margin-top: 80px;">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1">
<form action="" method="POST" id="frm">
<legend style="margin-bottom: 50px;">Type Hex Color for convert into RGB color</legend>
<p>
<label for="">Type Hex Color</label>
<input type="text" class="form-control" id="colorcode" placeholder="Type Hex Color">
</p>
<div class="text-center">
<button type="submit">Submit</button>
</div>
</form>
<div id="shiv" class="text-center"></div>
<div id="msg"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (event) {
$("#colorcode").keyup(function(event){
$(this).val($(this).val().toUpperCase());
});
$("#frm").submit(function(event) {
event.preventDefault();
var hi = $("#colorcode").val();
$("#shiv").css("color", hi);
var now = $("#shiv").css("color");
$("#msg").html(`<h3 class="text-center">RGB COLOR = ${now}; </h3>`);
alert(now);
});
});
</script>
</body>
</html>
Get Demo for HEX to RGB color converter
It was the same as we have done in HEX to RGB color converter but it's somehow tricky. You know that you can also convert codes using your pen and notepad but you need to remeber the below table Binary and Decimal numbers.
Using Binary and Decimal Number for HEX to RGB and RGB to HEX color conversion.
| Binary | Decimal |
|---|---|
| 0000 | 0 |
| 0001 | 1 |
| 0010 | 2 |
| 0011 | 3 |
| 0100 | 4 |
| 0101 | 5 |
| 0110 | 6 |
| 0111 | 7 |
| 1000 | 8 |
| 1001 | 9 |
| 1010 | 10 (A) |
| 1011 | 11 (B) |
| 1100 | 12 (C) |
| 1101 | 13 (D) |
| 1110 | 14 (E) |
| 1111 | 15 (F) |
Let's change RGB2HEX code using your notebook and pen
If you are facing any problem in converting rbg2hex color ask me.
Let's change HEX2RGB code using your notebook and pen
I hope now it's peace of cake for you to convert color codes
