How to convert 3-digit Hexadecimal Color Code to 6-digit using JavaScript

Working with colors in web development is a vibrant journey, and sometimes you might encounter 3-digit hexadecimal color codes. If you find yourself needing 6-digit codes for compatibility or styling purposes, fear not! This blog post will guide you through a simple JavaScript solution to convert those 3-digit hex color codes into their 6-digit counterparts.

Unveiling the Magic of Hex Color Conversion

The Challenge

Hexadecimal color codes are commonly represented as three or six digits. While six-digit codes provide more color variations, you might come across three-digit codes in certain situations. If you need consistency or a broader color palette, converting 3-digit hex color codes to 6 digits is the way to go.

The Solution: JavaScript Magic

Let's dive into a straightforward JavaScript function to perform this conversion:

function expandHexColor(hexColor) {
  const regex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  const result = hexColor.match(regex);

  if (result) {
    const expandedColor = `#${result[1]}${result[1]}${result[2]}${result[2]}${result[3]}${result[3]}`;
    return expandedColor.toUpperCase();
  } else {
    return "Invalid Hex Color Code";
  }
}

Breaking it Down

• /^#?([a-f\d])([a-f\d])([a-f\d])$/i: This regular expression matches both #ABC and ABC formats, capturing the three hex digits.
• result[1], result[2], result[3]: These variables represent the captured hex digits.
• expandedColor: Concatenates the hex digits to form the expanded 6-digit color code.

Putting it Into Action

Now, let's use this function with an example:

const originalColor = "#F12";
const expandedColor = expandHexColor(originalColor);
console.log(`Original Color: ${originalColor}, Expanded Color: ${expandedColor}`);

This will output: Original Color: #F12, Expanded Color: #FF1122.

Conclusion

Converting 3-digit hex color codes to 6 digits is a quick and handy trick in your web development toolkit. With this simple JavaScript function, you can ensure consistency and unleash the full spectrum of colors in your projects.

The next time you encounter those 3-digit hex color codes, remember this nifty conversion. Happy coding!

"Colors are the spice of the web development life. Spice it up, expand those hex colors, and keep coding in full color!"