Convert HEX code to RGB using HTML CSS and JavaScript.

Hex code , which are used in web application to identify colors, can be converted into the RGB (red, green, and blue) . From this we can develop a simple web converter that converts HEX color codes to RGB values using HTML, CSS, and JavaScript.

Building HEX code to RGB Converter

The tool consists of an input field where users may enter a HEX color code and a button to begin the conversion.. The RGB values that correspond to the HEX code are converted and shown on the webpage upon clicking the button.

2.html

An input field and a convert button are part of the user interface that the HTML structure offers.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HEX to RGB</title>
    <link rel="stylesheet" href="2.css">
</head>
<body>
    <div id="hextorgb">
        <h4>HEX to RGB Converter</h4>
        <form>
            <label>Color Format : #F5CD14</label>
            <input type="text" id="hex-color" placeholder="Hex">
            <button type="button" id="Convert" onclick=(hextorgb())>Convert</button>
            <input type="text" id="rgb-color" placeholder="Rgb">
        </form>
    </div>

    <script src="2.js"></script>
    
</body>
</html>

2.css

The utility is made aesthetically pleasing and user-friendly using the CSS. The styling comprises formatting the button and input field, applying padding, and centering the content.

body{
    background-color: grey;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

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

#hextorgb 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: burlywood;
    font-size: 18px;
    color: blanchedalmond;
}

3.js

The HEX to RGB conversion done by Js. The `hextorgb` function handles input and changes the output, while the another function performs the conversion.

function hextorgb(){
    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');
    }

}

OUTPUT :

With a little knowledge of HTML, CSS, and JavaScript, you can create a useful tool to convert HEX color codes to RGB values. Creating color palettes, building user interfaces, and other tasks can all benefit from this conversion. You can construct useful tools for your projects and improve your web development abilities by using this guide.

Building HEX code to RGB Converter

Related Posts

Leave a Comment Cancel Reply