Welcome to today’s tutorial. In this tutorial, we will learn how you can create an RGB to HEX and HEX to RGB converter. As a developer/ designer you might have been using a lot of colour tools. Today let us make this tool ourselves with HTML, CSS and Vanilla Javascript. This is a great project for javascript intermediates.
The converter consists of two input fields. One for RGB and another one for Hex. If the user wants to convert his RGB colour code into HEX code, he needs to enter the colour value in the RGB field and the HEX equivalent will be displayed in the other field. Similarly, for Hex to RGB conversion the user has to enter the colour code in the HEX field and output will be displayed in the RGB field.
Video Tutorial:
If you are interested in watching the video tutorial, you can check it out here down below. For more such videos, be sure to check out my youtube channel.
Folder Structure:
Let us take a look at the folder structure and files. Create project folder RGB HEX Converter. Inside this folder, you need to create three files. First is the HTML file index.html. The next one is the stylesheet style.css. And finally the last one script.js. This is a javascript file.
HTML:
Paste the code below into your HTML file. We start the HTML code by create a container div. Inside this container are two wrapper. Each of the wrappers encloses a label and an input field. The first label is for the RGB field while the second is for the HEX field.
Assign an id to each of the input fields. Link the labels to the input field using this id. Here, take care that the ID matched with the for attribute of the label.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGB-Hex Converter</title>
<!--Google Font-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="wrapper">
<label for="rgb">RGB</label>
<input type="text" id="rgb" oninput="toHex()" placeholder="Enter RGB Value">
</div>
<div class="wrapper">
<label for="hex">HEX</label>
<input type="text" id="hex" oninput="toRgb()" placeholder="Enter Hex Value">
</div>
</div>
<!--Script-->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, paste the code provide below into the style.css file. We do a regular CSS reset by removing the default margins and paddings of all the elements. Next we add #976efa colour to the document body. We place and arrange the wrapper by using the flex layout. We use the flex-wrap property to make it responsive.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins",sans-serif;
}
body{
width: 100%;
background-color: #976efa;
}
.container{
background-color: #ffffff;
width: 80vmin;
min-width: 250px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 50px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
padding: 50px 10px;
border-radius: 5px;
}
.wrapper{
width: 230px;
}
label{
font-weight: 600;
}
input{
width: 100%;
padding: 5px 0;
outline: none;
border: none;
border-bottom: 2px solid #404050;
font-size: 20px;
font-weight: 400;
margin-top: 5px;
}
Javascript:
Lastly, we add functionality to this converter. Paste the code below into your script.js file. On window load, we clear both the input fields. When the user inputs something in the Hex field, the toRGB() is called. First the input from the input field is validated. If the input is invalid the invalid() is called.
Other Tutorials You Might Like:
Regular Expressions:
^#{0,1}: 0 or 1 # in the start(i.e # is optional).[A-Fa-f0-9]{6}$: 6 characters from A to F or a to f or any number till the end of the input.
The user can either use the format with ‘#’ or no ‘#’ for the HEX Code. That is both ‘2345ac’ and ‘#2345ac’ are valid. The parseInt(value,16) would convert the hexadecimal input to number.
How to Create Header Using HTML and CSS
let hexInput = document.getElementById("hex");
let rgbInput = document.getElementById("rgb");
window.onload=()=>{
hexInput.value = "";
rgbInput.value = "";
}
function valid(element){
element.style.color = "#202040";
}
function invalid(element,otherElement){
element.style.color = "#f04624";
otherElement.value = 0;
}
function toRgb(){
let hexCode = hexInput.value;
let rgbArr = [];
if(/^#?[A-Fa-f0-9]{6}$/.test(hexCode)){
valid(hexInput);
hexCode = hexCode.split("#")[1] || hexCode;
for(let i=0; i<hexCode.length;i+=2){
rgbArr.push(parseInt(hexCode[i] + hexCode[i+1], 16));
console.log(rgbArr);
}
rgbInput.value = "rgb(" + rgbArr + ")";
document.body.style.backgroundColor = "rgb(" + rgbArr + ")";
}
else{
invalid(hexInput,rgbInput);
}
}
Â
When the user enters the colour code in the RGB field, the toHex() is called. This function first validates the input code using the regular expressions.
Regular Expressions:
^rgb\(: Start with ‘rgb(‘.[0-9]{1,3},[0-9]{1,3},[0-9]{1,3}: Three values seperated by commas.Each value would be 1/2/3 digit.\)$: ends with ‘)’.
function toHex(){
let rgbCode = rgbInput.value;
let rgbRegex1 = /^rgb\([0-9]{1,3},[0-9]{1,3},[0-9]{1,3}\)$/;
let rgbRegex2 = /^[0-9]{1,3},[0-9]{1,3},[0-9]{1,3}$/
let hex = "#";
if(rgbRegex1.test(rgbCode) || rgbRegex2.test(rgbCode)){
rgbCode = rgbCode.replace(/[rgb()]+/g,"") || rgbCode;
rgbCode = rgbCode.split(",");
let condition = rgbCode.every((value) => {
return parseInt(value) <= 255;
});
if(condition){
valid(rgbInput);
rgbCode.forEach(value => {
value = parseInt(value).toString(16);
hex += value.length == 1? "0"+value : value;
});
hexInput.value = hex;
document.body.style.backgroundColor = hex;
}
else{
invalid(rgbInput,hexInput);
}
}
else{
invalid(rgbInput,hexInput);
}
}
Â
Your RGB-HEX converter is now ready. That’s it for this tutorial. Drop your suggestions, feedbacks, queries and tutorial requests below. Also, stay tuned for more such tutorials.
Â
Code is not dowloading
Thank you for reporting. It is fixed. You can now download the code.