RGBA to HEX Converter Javascript | Color Converter Html Css Javascript – Codewithrandom

RGBA to HEX Converter Javascript | Color Converter Html Css Javascript – Codewithrandom

RGBA to HEX Converter Javascript | Color Converter Html Css Javascript - Codewithrandom


Welcome🎉 to Code With Random blog. In this blog, we learn how we create the RGBA to HEX Converter. We use HTML, Css, and javascript for this RGBA to HEX Converter. I hope you enjoy our blog so let’s start with a basic HTML structure for the RGBA to HEX Converter.

HTML Code 

 <body>  
<div class="header">
<h1>RGBA to HEX converter</h1>
</div>
<div class="content">
<form onsubmit="return convert(event)">
<label>
Red
<input type="number" min="0" max="256" name="red" id="red" placeholder="Red value" title="Red" required/>
</label>
<br/>
<label>
Green
<input type="number" min="0" max="256" name="red" id="green" placeholder="Green value" title="Green" required/>
</label>
<br/>
<label>
Blue
<input type="number" min="0" max="256" name="red" id="blue" placeholder="Blue value" title="Blue" required/>
</label>
<br/>
<label>
Alpha
<input type="number" min="0" max="100" name="alpha" id="alpha" placeholder="Alpha value (0-100)" title="Alpha" required/>
</label>
<br/>
<button type="submit">Calculate</button>
</form>
<div id="resultcontainer">
<div id="result"></div>
</div>
</div>
</body>

There is all the HTML code for the RGBA to HEX Converter. Now, you can see an output with CSS, then we write javascript for the RGBA to HEX Converter.

output

RGBA to HEX Converter Javascript | Color Converter Html Css Javascript - Codewithrandom

CSS code

 <style>  
body {
margin: 0px;
padding: 0px;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.header {
font-size: 24px;
font-family: monospace;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content p {
font-size: 18px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
form label {
font-family: monospace;
font-size: 28px;
line-height: 28px;
width: 250px;
display: flex;
align-items: center;
}
form label:nth-child(1) {
color: red;
}
form label:nth-child(2) {
color: green;
}
form label:nth-child(3) {
color: blue;
}
form input {
color: black;
height: 28px;
width: 100%;
border: none;
margin-left: 10px;
}
form button {
background-color: yellow;
height: 30px;
padding: 4px 12px;
color: black;
font-weight: bold;
border: 1px solid black;
border-radius: 6px;
font-family: monospace;
}
#resultcontainer {
width: 100%;
height: 100px;
background-color: #fdfff7;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
#result {
font-family: monospace;
font-size: 24px;
}
</style>

Css Updated output

RGBA to HEX Converter Javascript | Color Converter Html Css Javascript - Codewithrandom

Javascript code 

   <script>  
function colorAlphaAjusted(c, a) {
// against white background
return c * a + 255 * (1 - a);
}
function rgbaToRgb(r, g, b, a) {
return [colorAlphaAjusted(r, a), colorAlphaAjusted(g, a), colorAlphaAjusted(b, a) ];
}
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function convert(e) {
e.preventDefault();
var red = document.getElementById('red');
var green = document.getElementById('green');
var blue = document.getElementById('blue');
var alpha = document.getElementById('alpha');
var rValue = red && red.value;
var gValue = green && green.value;
var bValue = blue && blue.value;
var aValue = alpha && alpha.value;
aValue /= 100;
var [r, g, b] = rgbaToRgb(rValue, gValue, bValue, aValue);
document.getElementById('result').innerHTML = "#" + componentToHex(Math.round(r)) + componentToHex(Math.round(g)) + componentToHex(Math.round(b));
return false;
}
</script>

Final output

RGBA to HEX Converter Javascript | Color Converter Html Css Javascript - Codewithrandom

Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the RGBA to HEX Converter. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create RGBA to HEX Converter using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 



Leave a Reply