Hex to RGB Conversion

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/BasicConceptsGroup -.-> javascript/obj_manip("`Object Manipulation`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("`Template Literals`") subgraph Lab Skills javascript/variables -.-> lab-28375{{"`Convert Hexadecimal to RGB String`"}} javascript/data_types -.-> lab-28375{{"`Convert Hexadecimal to RGB String`"}} javascript/arith_ops -.-> lab-28375{{"`Convert Hexadecimal to RGB String`"}} javascript/comp_ops -.-> lab-28375{{"`Convert Hexadecimal to RGB String`"}} javascript/cond_stmts -.-> lab-28375{{"`Convert Hexadecimal to RGB String`"}} javascript/obj_manip -.-> lab-28375{{"`Convert Hexadecimal to RGB String`"}} javascript/higher_funcs -.-> lab-28375{{"`Convert Hexadecimal to RGB String`"}} javascript/spread_rest -.-> lab-28375{{"`Convert Hexadecimal to RGB String`"}} javascript/template_lit -.-> lab-28375{{"`Convert Hexadecimal to RGB String`"}} end

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

Open the Terminal/SSH and type node to start practicing coding.
Use the bitwise right-shift operator and mask bits with the & (and) operator.
If the color code is 3-digits, first convert it to the 6-digit version.
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.

Convert Hexadecimal to RGB String

Introduction

Skills Graph

Hex to RGB Conversion

Summary

Other JavaScript Tutorials you may like