Before we start to write code and convert our colors, we need to understand both systems’ notations, so let’s begin!

Hex Color Notation

For Hex colors, we have the following pattern:

RRGGBB

where RR represents red color, GG green color, and BB blue color. Each of these chunks is a hexadecimal number.

RGB Color Notation

For RGB colors, we have something like this:

(R, G, B)

where similarly, R stands for red, G for green, and B for blue. R, G, and B are also numbers, but in this case, just regular decimal numbers in the range from 0 to 255.

Hex to RGB

Keeping in mind the details of both notations and information about which number systems we are dealing with, it’s quite easy to conclude that we simply need to transform hexadecimal numbers to decimal for each color channel red, green, and blue. In JavaScript for this purpose, we can just parseInt() function. The function has 2 parameters where the first parameter is the value to parse, and the second one should be a number in the range from 2 to 36, which represents the base of the number (radix).

parseInt(string [, radix])

Final Implementation

const HEX_COLOR_REGEXP = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;

// supports only normal hex color notation
const hexToRgb = (hex) => {
  const result = HEX_COLOR_REGEXP.exec(hex);

  if (!result) {
    return null;
  }

  return {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16),
  };
};

You probably heard at least once this assertion “In JavaScript, everything is an object”. There are some reasons for this statement, but in fact, this statement is a misconception. The truth is that most of the values in JavaScript can behave like objects, but this doesn’t make them objects.

Primitive Types

ECMAScript® Language Specification tells us straight off that JavaScript has primitive types. It has 7 built-in types, which are:

• undefined
• null
• bolean
• string
• number
• symbol
• object

All of these types except object are primitives, so according to specification definitely, not everything is an object in JavaScript.

6.1ECMAScript Language Types
An ECMAScript language type corresponds to values that are directly manipulated by an ECMAScript programmer using the ECMAScript language. The ECMAScript language types are Undefined, Null, Boolean, String, Symbol, Number, and Object. An ECMAScript language value is a value that is characterized by an ECMAScript language type.

Boxing

Primitive values don’t have properties or methods, so you may wonder how it’s possible that we can access properties or call methods on primitives.

const text = 'hello';

text.length; // 5; 
text.toUpperCase(); // HELLO;

This behavior is called boxing and it’s a form of implicit coercion. In short, when you try to access a property or call a method on a primitive value JavaScript tries to be super helpful and make it into an object for you. Let’s imagine a world in which JavaScript has no boxing, then the code above might look like this:

const text = 'hello';

new String(text).length; // 5
new String(text).toUpperCase(); // HELLO

Wrapping up

Boxing is a thing that might give us this false impression that everything in JavaScript is an object, but as you can see the truth is slightly different. It allows most of the values to behave like objects, but it doesn’t make them objects. Also, specification tells us clearly that not everything is an object in JavaScript world. This simple example shows us that it’s always a good practice to check the specification rather than try to build our own theories based on what we observe and how things behave. What we might think is happening under the hood and what is really going on could be two different things.