Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to convert 3-digit color code to 6-digit color code using JavaScript?
In this tutorial, we will see how to convert 3-digit color code to 6-digit color code in JavaScript.
A 3-digit hex color code represents colors in #RGB format, where each digit controls red, green, and blue values. To convert to 6-digit format, we duplicate each character: #RGB becomes #RRGGBB.
For example:
3-digit: #08c 6-digit: #0088cc 3-digit: #f4a 6-digit: #ff44aa
Algorithm
Step 1: Check if the input length is exactly 3 characters
Step 2: Split the string into individual characters using split("")
Step 3: Use map() to duplicate each character
Step 4: Join the duplicated characters back into a string using join("")
Basic Implementation
<!DOCTYPE html>
<html>
<head>
<title>Hex Color Converter</title>
</head>
<body>
<h2>Convert 3-digit hex code to 6-digit</h2>
<input type="text" id="hexInput" placeholder="Enter 3-digit hex (e.g., f4a)" />
<button onclick="convertHex()">Convert</button>
<div id="result"></div>
<script>
function convertHex() {
let input = document.getElementById("hexInput").value.trim();
let result = document.getElementById("result");
// Remove # if present
input = input.replace("#", "");
if (input.length === 3) {
let sixDigit = input.split("").map(char => char + char).join("");
result.innerHTML = `
<p><strong>3-digit:</strong> #${input}</p>
<p><strong>6-digit:</strong> #${sixDigit}</p>
<div style="width:50px; height:30px; background:#${sixDigit}; border:1px solid #000; margin:10px 0;"></div>
`;
} else {
result.innerHTML = "<p style='color:red'>Please enter exactly 3 hex characters</p>";
}
}
</script>
</body>
</html>
Complete Function with Validation
<script>
function convert3to6Digit(hexColor) {
// Remove # if present
hexColor = hexColor.replace("#", "");
// Validate input
if (hexColor.length !== 3) {
return "Invalid input: must be 3 characters";
}
// Check if all characters are valid hex
if (!/^[0-9a-fA-F]{3}$/.test(hexColor)) {
return "Invalid hex characters";
}
// Convert to 6-digit
return "#" + hexColor.split("").map(char => char + char).join("");
}
// Test the function
console.log(convert3to6Digit("08c")); // #0088cc
console.log(convert3to6Digit("f4a")); // #ff44aa
console.log(convert3to6Digit("#abc")); // #aabbcc
</script>
How It Works
Practical Use Cases
This conversion is useful when:
- Working with CSS frameworks that require 6-digit hex codes
- Processing user input that may contain shortened hex values
- Normalizing color data for consistent storage
Conclusion
Converting 3-digit to 6-digit hex colors is straightforward: split the string, duplicate each character, and join them back. Always validate input to ensure you're working with valid hex values.
1K+ Views
