Introduction:
In this article, we'll look at how to make RGB to HEX converter using HTML, CSS, and JavaScript. Users can enter RGB codes of Red, green, and blue, and it will instantly generate the HEX code, which you can copy and use in your design.
Source Code
<!DOCTYPE html>
<html>
<head>
<title>RGB to HEX Color Converter</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.converter-container {
background-color: #fff;
border-radius: 8px;
padding: 40px;
width: 400px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.converter-container h2 {
text-align: center;
margin-bottom: 30px;
color: #333;
}
.converter-form input[type="number"] {
width: 100%;
padding: 12px;
margin-bottom: 20px;
border: none;
border-radius: 4px;
font-size: 16px;
}
.converter-form button {
width: 100%;
padding: 12px;
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
.converter-form .result {
margin-top: 20px;
text-align: center;
}
.converter-form .result .color-box {
display: inline-block;
width: 50px;
height: 50px;
vertical-align: middle;
margin-right: 10px;
border-radius: 4px;
}
.converter-form .result .hex-code {
font-size: 24px;
font-weight: bold;
display: inline-block;
vertical-align: middle;
color: #333;
}
.converter-form .result .hex-code span {
color: #333;
}
.converter-form .result .copy-button {
display: block;
margin-top: 10px;
padding: 8px 12px;
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="converter-container">
<h2>RGB to HEX Color Converter</h2>
<form class="converter-form">
<input type="number" placeholder="Red (0-255)" id="redInput" min="0" max="255" required>
<input type="number" placeholder="Green (0-255)" id="greenInput" min="0" max="255" required>
<input type="number" placeholder="Blue (0-255)" id="blueInput" min="0" max="255" required>
<button type="button" onclick="convertToHex()">Convert</button>
<div class="result" id="resultContainer" style="display: none;">
<div class="color-box" id="colorBox"></div>
<div class="hex-code" id="hexCode"></div>
</div>
</form>
</div>
<script>
function convertToHex() {
var red = parseInt(document.getElementById("redInput").value);
var green = parseInt(document.getElementById("greenInput").value);
var blue = parseInt(document.getElementById("blueInput").value);
// Convert the RGB values to HEX
var hex = "#" + ((1 << 24) | (red << 16) | (green << 8) | blue).toString(16).slice(1).toUpperCase();
// Display the HEX color code and color box
var resultContainer = document.getElementById("resultContainer");
var colorBox = document.getElementById("colorBox");
var hexCode = document.getElementById("hexCode");
colorBox.style.backgroundColor = hex;
hexCode.innerHTML = '<span style="color: ' + hex + '">' + hex + '</span>';
resultContainer.style.display = "block";
}
</script>
</body>
</html>
Below is a step-by-step explanation of each line of code.
This section is the standard structure of an HTML document. It contains HTML elements like html, head, title, style, body, and script.
<html>
<head>
<title>RGB to HEX Color Converter</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
...
</style>
</head>
<body>
<div class="converter-container">
...
</div>
<script>
...
</script>
</body>
</html>
This line sets the title of the web pages as "RGB to HEX Color Converter" which appears in the browser's title bar or tab.
<title>RGB to HEX Color Converter</title>
These lines define CSS styles for the body element. It sets the font family, background color, and centers the content both horizontally and vertically within the viewport.
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
...
</style>
This div element with the class "converter-container" serves as a container for the entire color conversion form and results.
<div class="converter-container">
...
</div>
This h2 element displays the heading "RGB to HEX Color Converter".
<h2>RGB to HEX Color Converter</h2>
This form element with the class "converter-form" contains the input fields and the convert button for the RGB to HEX color conversion.
<form class="converter-form">
...
</form>
These lines represent input fields for the red, green, and blue color values. They have specific attributes like placeholder (text shown when empty), id (the unique identifier for accessing them through JavaScript), min and max (value constraints), and required (ensures input is not left empty).
<input type="number" placeholder="Red (0-255)" id="redInput" min="0" max="255" required>
This button element triggers the convertToHex() JavaScript function when clicked. It initiates the conversion process.
<button type="button" onclick="convertToHex()">Convert</button>
This div element with the class "result" and the id "resultContainer" represents the container for displaying the conversion result. Initially, it's set to "display: none" to hide it.
<div class="result" id="resultContainer" style="display: none;">
...
</div>
This script section contains JavaScript code responsible for the RGB to HEX conversion, handling button click events and clipboard copy functionality.
The remaining lines within the script tags contain the JavaScript functions convertToHex() and copyToClipboard(). These functions are responsible for extracting the RGB input values, converting them to HEX, updating the result container with the converted color and code, and copying the HEX code to the clipboard when requested.
<script>
...
</script>
That's it. Congratulation you have successfully developed a RGB to HEX Converter tool.
Comments
Post a Comment