Build a Hexadecimal to RGB Color Converter in Browser Using Javascript Full Project For Beginners

Build a Hexadecimal to RGB Color Converter in Browser Using Javascript Full Project For Beginners

 

 

Welcome folks today in this blog post we will be building a hexadecimal to RGB color converter in browser using javascript.All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<div id="hex2rgb">
        <h4>Hex To Rgb Convert</h4>
        <form>
          <label>Color Format : #F5CD14</label>
            <input type="text" id="hex-color" placeholder="Hex">
            <button type="button" id="convert" onclick=(hex2rgb())>Convert</button>
            <input type="text" id="rgb-color" placeholder="Rgb"> </form>
    </div>

 

 

 

Now make a style.css file and copy paste the following cod

 

 

style.css

 

 

body {
    background-color: #fcfcfc;
    font-family: arial,sans-serif;
}

#hex2rgb {
    background-color: #fff;
    width: 450px;
    min-height: 400px;
    margin: 50px auto;
    box-shadow: 1px 1px 5px #ccc;
    color: #555;
    display: flex;
    flex-direction: column;
}

#hex2rgb h4 {
    text-align: center;
    padding-top: 20px;
    font-size: 20px;
}
form {
    margin: 30px 0;
}

form label {
  margin: 0 0 15px 15px;
  display: block;
}

form input {
    width: 90%;
    display: block;
    margin: 0 auto;
    height: 30px;
    padding: 5px;
    border: 1px solid #eee;
}

#convert {
    width: 93%;
    display: block;
    margin: 25px auto;
    height: 50px;
    padding: 10px 0;
    border-radius: 0;
    background-color: dodgerblue;
    font-size: 18px;
    color: #fff;
}

 

See also  Node.js Oxford Dictionary API Example to Find Meaning of Word in Javascript Full Project For Beginners

 

 

And now make a script.js file and copy paste the following code

 

 

 

script.js

 

 

function hex2rgb() {
            var hex_color = document.getElementById('hex-color').value
                , rgb_color = document.getElementById('rgb-color')
                , pattern_color = "^#([A-Fa-f0-9]{6})$";
            if (hex_color.match(pattern_color)) {
                var hex_color = hex_color.replace("#", "")
                    , r = parseInt(hex_color.substring(0, 2), 16)
                    , g = parseInt(hex_color.substring(2, 4), 16)
                    , b = parseInt(hex_color.substring(4, 6), 16);
                return rgb_color.value = 'rgb(' + r + ',' + g + ',' + b + ')';
            }
            else {
                alert('Error Color Format');
            }
        }

 

See also  JavaScript Program to Trim a String Using trim() Method & Regular Expression Full Project For Beginners

 

 

And now if you open the index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply