RGB to hex and hex to RGB Converter using JavaScript

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An RGB to HEX Using Html, Css, and JavaScript. This project is based on conversion between RGB to HEX which is going to do with JavaScript. So follow the upcoming content to create this project successfully.

Now We are going to create this project and for that, we were adding the HTML code first.

HTML CODE For RGB to HEX

Convert RGB/RGBA to hex:<br>
(opacity of rgba is ignored)<br>
<input type="text" value="rgba(34, 34, 34, 1)"> <button>Convert</button><br>
<br>
Result <span class="result"></span>

Here First We are adding the title for project and then we adding the input field using input tag  and the values is given as RGBA with numbers.Then an button is added for making the conversion and lastly for displaying result the span class with name is added.

Portfolio Website Using HTML ,CSS and Javascript Source Code

Now the HTML is complete , We can go for CSS to make some smaller styling in it.

CSS CODE For RGB to HEX

body { 
padding: 20px;
 background: #222;
 color: #ddd; 
}

Here there is single line of CSS is used. Nothing A body tag inside of it the padding , background and color properties is added.

JavaScript Code For RGB to HEX

function rgb2hex(rgb){
 rgb = rgb.match(/^rgba?[\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) : '';
}

$('button').click(function(){
    var hex = rgb2hex( $('input').val() );
    $('.result').html( hex );
    $('body').css('background',hex);
});

First, we are creating a function with the function name rgb2hex and the passing parameter has RGB. Then we pass a REGEX concept which means that symbols are declared inside a variable. then we set a condition to declare # with four numbers.

We select from “0” to a string of 16 and with the slice JS property, we are removing the last two elements.

Now we call the button class and declare a variable to store the entered input in it. Then calling the result and body we declared the condition that satisfies to be true. So the RBG to HEX will be executed properly.

50+ Front-end Projects With Source Code | Front-end Projects With Source Code

Yeah, That’s all for Project We have added all the source codes needed for this project. So we can make a preview of the Output given below.

Final Output For RGB to hex and hex to RGB Converter using JavaScript

Now We have Successfully created our RGB to hex and hex to RGB Converter using JavaScript. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE – Sarasujeria

WRITTEN BY – Ragunathan S