Octal to HEX converter Tool with colorful styling and all its features use any free library

 

Octal to Hexadecimal Converter

Enter Octal Number:

Hexadecimal Result:

body { background-color: #f8f9fa; color: #343a40; } .card { background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .result-text { font-weight: bold; font-size: 1.5em; color: #28a745; /* Green color for result */ } document.getElementById('convertButton').addEventListener('click', function() { const octalInput = document.getElementById('octalInput').value; const resultDiv = document.getElementById('result'); const hexOutput = document.getElementById('hexOutput'); // Validate octal input if (/^[0-7]+$/.test(octalInput)) { // Convert octal to decimal const decimalValue = parseInt(octalInput, 8); // Convert decimal to hexadecimal const hexValue = decimalValue.toString(16).toUpperCase(); hexOutput.textContent = hexValue; resultDiv.style.display = 'block'; } else { alert('Please enter a valid octal number.'); resultDiv.style.display = 'none'; } });

HEX to Octal converter Tool with colorful styling and all its features use any free library

 

HEX to Octal Converter

Enter HEX Value:

Octal Value:

body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #f3ec78, #af4261); color: white; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background-color: rgba(0, 0, 0, 0.7); padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); } h1 { margin-bottom: 20px; } .input-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input { padding: 10px; border: none; border-radius: 5px; width: 100%; font-size: 16px; } button { padding: 10px 15px; background-color: #6c63ff; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #5a54d5; } .result { margin-top: 20px; } h2 { margin-bottom: 10px; } p { font-size: 18px; font-weight: bold; } document.getElementById('convertButton').addEventListener('click', function() { const hexInput = document.getElementById('hexInput').value.trim(); const resultOutput = document.getElementById('resultOutput'); // Validate hex input if (!/^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(hexInput)) { resultOutput.textContent = 'Please enter a valid HEX color code!'; return; } // Remove hash symbol if present const hexValue = hexInput.replace('#', ''); // Convert HEX to decimal const decimalValue = parseInt(hexValue, 16); // Convert decimal to octal const octalValue = decimalValue.toString(8); resultOutput.textContent = octalValue.toUpperCase(); });

Decimal to Octal converter Tool with colorful styling and all its features use any free library

 

Decimal to Octal Converter

Octal Value:

body { font-family: Arial, sans-serif; background-color: #f0f8ff; color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); text-align: center; } h1 { color: #4a90e2; } input[type="number"] { padding: 10px; margin: 10px 0; border: 2px solid #4a90e2; border-radius: 5px; width: 100%; box-sizing: border-box; transition: border-color 0.3s; } input[type="number"]:focus { border-color: #007bff; outline: none; } button { background-color: #4a90e2; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #007bff; } h2 { margin-top: 20px; color: #d35400; } document.getElementById('convertButton').addEventListener('click', function() { const decimalInput = document.getElementById('decimalInput').value; const octalOutput = document.getElementById('octalOutput'); if (decimalInput === "") { octalOutput.textContent = "Please enter a valid decimal number."; return; } const decimalNumber = parseInt(decimalInput, 10); if (isNaN(decimalNumber) || decimalNumber < 0) { octalOutput.textContent = "Please enter a non-negative integer."; return; } const octalNumber = decimalNumber.toString(8); octalOutput.textContent = octalNumber; });

Octal to Decimal converter Tool with colorful styling and all its features use any free library

 

Octal to Decimal Converter

body { font-family: 'Arial', sans-serif; background-color: #f0f4f8; margin: 0; padding: 20px; } .container { max-width: 400px; margin: 0 auto; padding: 20px; border-radius: 10px; background-color: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); text-align: center; } h1 { color: #333; } input[type="text"] { width: 80%; padding: 10px; margin-bottom: 10px; border: 2px solid #4a90e2; border-radius: 5px; font-size: 16px; transition: border-color 0.3s; } input[type="text"]:focus { border-color: #007bff; outline: none; } button { padding: 10px 20px; background-color: #4a90e2; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #007bff; } .result { margin-top: 20px; padding: 10px; border: 1px solid #4a90e2; border-radius: 5px; font-size: 18px; color: #333; display: none; } document.getElementById("convertButton").addEventListener("click", function() { const octalInput = document.getElementById("octalInput").value; const resultContainer = document.getElementById("resultContainer"); // Validate input if (!/^[0-7]+$/.test(octalInput)) { resultContainer.textContent = "Please enter a valid octal number."; resultContainer.style.color = "red"; resultContainer.style.display = "block"; return; } // Convert octal to decimal const decimalValue = parseInt(octalInput, 8); // Display result resultContainer.textContent = `Decimal Value: ${decimalValue}`; resultContainer.style.color = "#4a90e2"; // Color for valid output resultContainer.style.display = "block"; });

Binary to Octal converter Tool with colorful styling and all its features use any free library

 

Binary to Octal Converter

Enter Binary Number:

Octal Result:

-

Note: Only binary numbers (0s and 1s) are accepted.

body { font-family: Arial, sans-serif; background-color: #f0f8ff; color: #333; margin: 0; padding: 20px; } .container { max-width: 600px; margin: 0 auto; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); background-color: #fff; } h1 { text-align: center; color: #4CAF50; } .input-group { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; font-weight: bold; } input[type="text"] { width: 100%; padding: 10px; border: 2px solid #4CAF50; border-radius: 4px; } button { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #45a049; } .result-group { margin-top: 20px; } h2 { color: #4CAF50; } .note { margin-top: 10px; font-style: italic; color: #666; } document.getElementById('convertButton').addEventListener('click', function() { const binaryInput = document.getElementById('binaryInput').value; const resultElement = document.getElementById('result'); // Validate binary input if (!/^[01]+$/.test(binaryInput)) { resultElement.textContent = "Invalid input! Please enter a valid binary number."; return; } // Convert binary to decimal const decimal = parseInt(binaryInput, 2); // Convert decimal to octal const octal = decimal.toString(8); // Display result resultElement.textContent = octal; });

Octal to Binary converter Tool with colorful styling and all its features use any free library

 

Octal to Binary Converter

Binary Value:

0

body { font-family: Arial, sans-serif; background: linear-gradient(to right, #4facfe, #00f2fe); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background: white; border-radius: 15px; padding: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); text-align: center; max-width: 400px; width: 90%; } h1 { color: #333; } input[type="text"] { width: 100%; padding: 10px; border: 2px solid #00f2fe; border-radius: 5px; margin-bottom: 10px; font-size: 16px; } button { background-color: #4facfe; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover { background-color: #00f2fe; } .result { margin-top: 20px; } h2 { color: #333; } #binaryOutput { font-size: 24px; font-weight: bold; color: #4facfe; } document.getElementById("convertButton").addEventListener("click", function() { const octalInput = document.getElementById("octalInput").value; const binaryOutput = document.getElementById("binaryOutput"); // Validate input if (octalInput === "") { binaryOutput.textContent = "Please enter a valid number!"; return; } // Check if the input is a valid octal number if (!/^[0-7]+$/.test(octalInput)) { binaryOutput.textContent = "Please enter a valid octal number!"; return; } // Convert octal to decimal const decimalValue = parseInt(octalInput, 8); // Convert decimal to binary const binaryValue = decimalValue.toString(2); // Update output binaryOutput.textContent = binaryValue; });

Decimal to HEX converter Tool with colorful styling and all its features use any free library

 

Decimal to HEX Converter

HEX Value:

#

body { font-family: Arial, sans-serif; background: linear-gradient(to right, #ff7e5f, #feb47b); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background: white; border-radius: 15px; padding: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); text-align: center; max-width: 400px; width: 100%; } h1 { color: #333; } input[type="number"] { width: 100%; padding: 10px; border: 2px solid #feb47b; border-radius: 5px; margin-bottom: 10px; font-size: 16px; } button { background-color: #ff7e5f; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover { background-color: #feb47b; } .result { margin-top: 20px; } h2 { color: #333; } #hexOutput { font-size: 24px; font-weight: bold; color: #ff7e5f; } document.getElementById("convertButton").addEventListener("click", function() { const decimalInput = document.getElementById("decimalInput").value; const hexOutput = document.getElementById("hexOutput"); if (decimalInput === "") { hexOutput.textContent = "Please enter a valid number!"; return; } const decimalNumber = parseInt(decimalInput, 10); if (isNaN(decimalNumber) || decimalNumber < 0) { hexOutput.textContent = "Please enter a positive integer!"; } else { const hexValue = decimalNumber.toString(16).toUpperCase(); hexOutput.textContent = `#${hexValue}`; } });