Convert Hexadecimal to RGB String

Introduction

In this lab, we will explore how to convert a hexadecimal color code to an rgb() or rgba() string using JavaScript. We will learn how to use bitwise operators and masking to extract the RGB values from the hex code. The lab will also cover how to handle 3-digit and 6-digit hex codes and how to incorporate an alpha value into the resulting string.

Hex to RGB Conversion

To convert a hexadecimal color code (with or without a # prefix) to an RGB string, follow these steps:

1. Open the Terminal/SSH and type node to start practicing coding.
2. Use the bitwise right-shift operator and mask bits with the & (and) operator.
3. If the color code is 3-digits, first convert it to the 6-digit version.
4. If an alpha value is provided alongside the 6-digit hex, return an rgba() string.

Here is the JavaScript code for the conversion:

const hexToRGB = (hex) => {
  let alpha = false,
    h = hex.slice(hex.startsWith("#") ? 1 : 0);
  if (h.length === 3) h = [...h].map((x) => x + x).join("");
  else if (h.length === 8) alpha = true;
  h = parseInt(h, 16);
  return (
    "rgb" +
    (alpha ? "a" : "") +
    "(" +
    (h >>> (alpha ? 24 : 16)) +
    ", " +
    ((h & (alpha ? 0x00ff0000 : 0x00ff00)) >>> (alpha ? 16 : 8)) +
    ", " +
    ((h & (alpha ? 0x0000ff00 : 0x0000ff)) >>> (alpha ? 8 : 0)) +
    (alpha ? `, ${h & 0x000000ff}` : "") +
    ")"
  );
};

You can use the hexToRGB function with the following examples:

hexToRGB("#27ae60ff"); // 'rgba(39, 174, 96, 255)'
hexToRGB("27ae60"); // 'rgb(39, 174, 96)'
hexToRGB("#fff"); // 'rgb(255, 255, 255)'

Summary

Congratulations! You have completed the Hex to RGB lab. You can practice more labs in LabEx to improve your skills.