Binary to Hexadecimal Converter using JavaScript
Last Updated :
02 Aug, 2024
Binary to Hexadecimal Converter tool is a utility that converts binary numbers (base-2) into hexadecimal numbers (base-16). It simplifies the process of converting binary data into a more compact and human-readable format. This tool aids in tasks such as programming, networking, and digital data manipulation.
What is Binary ?
Binary is a numerical system with a base of 2, utilizing only two digits: 0 and 1. It is fundamental in computing, representing data using combinations of these digits. Binary forms the foundation of digital electronics and computer programming.
What is Hexadecimal ?
Hexadecimal is a numerical system with a base of 16, using digits from 0 to 9 and letters from A to F to represent values from 10 to 15. It is commonly used in computing for concise representation of binary data, memory addresses, and color codes.
How to convert Binary to Hexadecimal ?
Let's convert the binary number 11011002 to hexadecimal using the method you provided:
To convert the binary number 1101100 to hexadecimal:
- Group the binary digits into sets of four, starting from the right: 0110 1100
- Add leading zeroes if necessary to complete the last group:
- 0110 (binary) = 6 (hexadecimal)
- 1100 (binary) = C (hexadecimal)
- Combine the hexadecimal digits: 6C
So, the hexadecimal representation of the binary number 1101100 is 6C..
How to use Binary to Hexadecimal Converter ?
To use a Binary to Hexadecimal Converter, input the binary number you want to convert. The converter will automatically translate the binary digits into corresponding hexadecimal values. Simply enter the binary number and obtain the hexadecimal output. It simplifies the process of converting binary data into a more manageable hexadecimal format for various applications.
Code Example: Here is the code example of above-mentioned Binary to Hexadecimal Converter
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Binary to Hex Converter</title>
</head>
<body>
<div class="container">
<h3>Binary to Hex Converter</h3>
<div class="myInput">
<div class="input-group">
<label for="binaryInput">
Binary Input:
</label>
<input type="text"
id="binaryInput"
placeholder="Enter Binary Number"
onkeypress="validateBinary(event)">
</div>
</div>
<div class="buttonsControls">
<button class="myBTN"
onclick="convertBinaryToHex()">
Convert
</button>
<button class="myBTN"
onclick="clearFields()">
Clear
</button>
</div>
<div class="myOutput">
<div class="output-group">
<label for="hexOutput">
Hex Output:
</label>
<input type="text"
id="hexOutput"
placeholder="Hexadecimal value is here" readonly>
</div>
<div class="conversion-steps">
<label for="conversionSteps">
Conversion Steps:
</label>
<input type="text"
id="conversionSteps"
placeholder="Conversion steps here" readonly>
</div>
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
/* background-color: #f0f0f0; */
display: flex;
justify-content: center;
align-items: center;
top: 20px;
}
.container {
text-align: center;
margin-top: 30px;
width: 45%;
/* border: 1px solid; */
border-radius: 6px;
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.16),
0 3px 6px rgba(0, 0, 0, 0.23);
background-color: #BBC3A4;
}
input {
padding: 10px;
font-size: 16px;
border-radius: 6px;
border: 1px solid #ccc;
text-align: center;
}
label {
font-size: 18px;
font-weight: bold;
text-align: center;
}
.buttonsControls {
width: 90%;
margin: 10px;
padding: 6px;
}
.myBTN {
padding: 10px 20px;
font-size: 16px;
border-radius: 3px;
border: none;
outline: none;
background-color: #4f4c5e;
color: #ffffff;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
margin: 5px;
font-weight: bold;
}
.myBTN:hover {
background-color: #2a93d5;
transform: scale(1.05);
}
.myOutput,
.myInput {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* border: 1px solid; */
}
.output-group,
.conversion-steps,
.input-group {
width: 90%;
/* border: 1px solid; */
padding: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 720px) {
.container {
width: 90%;
}
}
@media screen and (max-width: 720px) {
.container {
width: 80%;
}
}
@media screen and (max-width: 560px) {
.input-group {
flex-direction: column;
}
label {
margin-bottom: 0;
}
input {
margin-bottom: 10px;
}
.buttonsControls {
flex-direction: column;
}
.buttonsControls .myBTN {
margin-top: 5px;
}
.output-group {
width: 100%;
flex-direction: column;
}
.conversion-steps {
width: 100%;
flex-direction: column;
}
label {
padding: 6px 0;
}
}
@media screen and (max-width: 480px) {
.container {
width: 90%;
}
}
@media screen and (max-width: 360px) {
.container {
width: 95%;
}
}
function validateBinary(event) {
const key = event.key;
if (key !== "0" && key !== "1" && key !== " ") {
event.preventDefault();
}
}
function displayConversionSteps(binaryValue, hexValue) {
const stepsInput = document.getElementById("conversionSteps");
stepsInput.value = `(${binaryValue})â‚‚ = `;
// Convert binary to hexadecimal
let hexSteps = '';
let binaryGroup = '';
for (let i = binaryValue.length - 1; i >= 0; i--) {
binaryGroup = binaryValue[i] + binaryGroup;
if (binaryGroup.length === 4 || i === 0) {
const hexDigit = parseInt(binaryGroup, 2).toString(16).toUpperCase();
hexSteps = `= ${hexDigit} ` + hexSteps;
binaryGroup = '';
}
}
stepsInput.value += hexSteps.trim();
}
function convertBinaryToHex() {
const binaryInput = document.getElementById("binaryInput").value.trim();
if (binaryInput === "") {
alert("Please enter a binary number.");
return;
}
const decimalOutput = parseInt(binaryInput, 2);
const hexOutput = decimalOutput.toString(16).toUpperCase();
document.getElementById("hexOutput").value = hexOutput;
displayConversionSteps(binaryInput, hexOutput);
}
function clearFields() {
document.getElementById("binaryInput").value = "";
document.getElementById("hexOutput").value = "";
document.getElementById("conversionSteps").value = "";
}
Advantages of Binary to Hexadecimal Converter
- Compact Representation: Hexadecimal reduces the length of binary data, making it more concise and easier to read, especially for large datasets.
- Efficient Memory Usage: Hexadecimal simplifies memory addressing and manipulation, enhancing efficiency in programming and digital systems.
- Convenient for Programming: Hexadecimal simplifies programming tasks by providing a more human-readable representation of binary data, aiding in debugging and comprehension.
- Facilitates Data Communication: Hexadecimal facilitates data exchange between systems, as it provides a concise and universally understood representation of binary information, aiding in interoperability.
Similar Reads
Binary to Decimal Number Converter
Binary to Decimal Converter is a powerful tool that transforms binary numbers (base-2) into decimal numbers (base-10). iframe {width: 700px; height: 500px;} @media (max-width: 780px) {.article--viewer .a-wrapper .content .text iframe {max-width: 100%; min-height: 700px; height: auto;}} @media (max-w
2 min read
Design Hex to Binary Converter
A Hex to Binary converter is a valuable tool that translates hexadecimal numbers (base-16) into binary numbers (base-2). #content-iframe {width: 100%; height: 500px;} @media (max-width: 780px) {.article--viewer .a-wrapper .content .text #content-iframe {max-width: 100%; min-height: 700px; height: au
2 min read
Hexadecimal to Decimal Converter
Our Hexadecimal to Decimal Converter tool allows you to convert hexadecimal numbers to their decimal equivalents. iframe {width: 700px; height: 500px;} @media (max-width: 780px) {iframe{max-width: 100%; min-height: 700px; height: auto;}} @media (max-width: 576px) {iframe{min-height: 600px;}}How to U
4 min read
Base64 to JSON Converter
Base64 to JSON Converter translates the input data from the Base64-encoded format to JSON format. It enables the conversion process for the users to process Base64-encoded data into the JSON format, and perform various operations such as copying, resetting, uploading files, and downloading results f
2 min read
Hex to Decimal Conversion
Hex to Decimal Conversion is a fundamental operation in computer science and digital electronics. The operation requires converting numerals from one number system to another, specifically from the Hexadecimal Number System to the Decimal Number System. As we know, a number system is used to represe
13 min read
Unicode to ASCII Converter
Unicode to ASCII Converter is a tool that transforms Unicode-encoded text into ASCII, providing a simplified character set. It aids compatibility and representation, allowing users to convert text between different encoding schemes, ensuring broader compatibility across systems and applications. ifr
2 min read
JavaScript Program to Convert Hexadecimal to Decimal
Decimal numbers are a base 10 number system which uses 10 digits from 0 to 9 and hexadecimal numbers are a base 16 number system which uses 16 digits, numbers from 0 to 9, and letters from A to F. We are given a hexadecimal number as input we have to convert it into decimal in JavaScript and print t
3 min read
How to convert decimal to hex in JavaScript ?
Given a number and the task is to convert the number from decimal to hex. This can be done by using toString() method. It takes the parameter which is the base of the converted string. In this case, the base will be 16. Syntax: decimalNumber.toString( radix ) Parameters: decimalNumber: It holds the
1 min read
Hexadecimal to Binary Converter in PHP
Hexadecimal and binary are two number systems commonly used in computing. Hexadecimal (base 16) is often used to represent binary values in a more human-readable format. Hexadecimal to Binary converter is a common task in programming, especially when dealing with low-level operations or data manipul
2 min read
How to convert Binary to Hexadecimal?
A number system is a way of expressing numbers using a consistent set of symbols or digits. The most common number systems are based on different "bases" or "radices," which determine how numbers are represented. Here are some common types of number systems: Decimal Number System (base 10; uses digi
6 min read