HEX to RGB

Medium

Prompt

Could you write a JavaScript function that takes a string representing a color in hexadecimal format and returns an object representing the equivalent color in RGB (Red, Green, Blue) format?

Requirements

  • The input hexadecimal color will be a string starting with a '#' followed by either 3 or 6 hexadecimal characters. Each pair of characters (or single character in the case of a 3-character input) represents one color component in the order Red, Green, and Blue.
  • The function should handle both 3-character and 6-character hexadecimal color codes.
  • The resulting RGB color should be an object with keys 'r', 'g', and 'b', each holding a decimal number between 0 and 255. For example, for input '#0080ff', the function should return {r: 0, g: 128, b: 255}.
  • The function should be written without using regular expressions.
  • You are not allowed to use any external libraries or packages for this task.

Playground

Hint 1

Hex colors can come in shorthand form, like #abc, which is equivalent to #aabbcc. How can you expand a 3-character hex color to its 6-character form?"

Hint 2

Hexadecimal is a base-16 number system used in digital systems, and it's useful for representing binary data. It uses sixteen distinct symbols: 0-9 to represent values zero to nine, and A-F (or a-f) to represent values ten to fifteen.

Each pair of characters in the 6-character hex color represents the red, green, and blue components. How can you extract and convert these pairs to their decimal equivalents?

Hint 3

Use parseInt with a base of 16 to convert each color component from hex to decimal. How can you apply this to the substrings representing the red, green, and blue values?

Solution

Note

  • charCodeAt(0) retrieves the Unicode value of the first character.
  • 35 is the Unicode value of #, so this check is equivalent to hex[0] === '#'.
  • I am not using '#' directly because it does not work in the StackBlitz IDE. However, you should use '#' in an interview.

Explanation

The function hexToRgb(hex) is designed to convert a hexadecimal color code to an RGB color code. Let's break down the concepts:

Hexadecimal color codes are a common way to specify colors in web design, and typically start with a '#' symbol, followed by 6 hexadecimal digits (0-9 and A-F). These digits represent the intensity of red, green, and blue respectively in pairs. There's also a 3-digit shorthand notation, where each digit needs to be doubled for full representation.

In our function, we first check for and remove the '#' symbol. We then validate if the code is in 3-digit shorthand notation and if so, we expand it to the standard 6 digits. The function then verifies if the final color code is 6 digits long, throwing an error if not.

Finally, the function translates this 6 digit hexadecimal color code to an RGB format. It does this by taking each pair of hexadecimal digits, converting them into decimal numbers, and storing these values as 'r', 'g', and 'b' in the returned object. These values represent the intensities of red, green, and blue on a 0 to 255 scale, respectively.

HEX to RGB Maths

The process to convert a hexadecimal color value to RGB involves understanding that a hexadecimal (base-16) value can be converted to decimal (base-10), and that the hexadecimal color value is really three two-digit hexadecimal values concatenated together, each representing the red, green, and blue components of the color.

Here's the mathematical process step by step:

  1. Break down the 6-digit hexadecimal color into three 2-digit components:

    • RR (red)
    • GG (green)
    • BB (blue)

  2. Each 2-digit value is a hexadecimal number in the range 00-FF.

  3. Convert each 2-digit hexadecimal number to a decimal number. The left digit is in the 16s place, and the right digit is in the 1s place. So a 2-digit hexadecimal number XY would convert to a decimal number like this: X * 16 + Y For example, if we have FF, F is 15 in decimal (since A=10, B=11, C=12, D=13, E=14, F=15 in hexadecimal).

    So the calculation becomes:

    • F * 16 + F
    • 15 * 16 + 15
    • 240 + 15 = 255

    So, for a full color like #3BCDEF, you would calculate each component separately:

    • 3B for red: 3 * 16 + 11 = 59
    • CD for green: 12 * 16 + 13 = 205
    • EF for blue: 14 * 16 + 15 = 239

    So, #3BCDEF in RGB would be (59, 205, 239).

00:00

Table of Contents