snippetjavascriptTip

Convert an RGB color string to a JavaScript array or object

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

javascriptrgbobjectcolorconvertarraystring

Problem

When working with colors, you might need to convert a color string to a more usable format. This often means converting the string to an array of values or an object with the values of each color. Here's how you can convert an rgb() color string to a JavaScript array or object.
> [!NOTE]
>
> Converting between other color formats and rgb() might be a prerequisite in many cases. This topic is covered in length in a previous article.
In order to convert an rgb() color string to an array of values, you can use String.prototype.match() to get an array of 3 strings with the numeric values, and then use Array.prototype.map() in combination with Number to convert them into an array of numeric values.

Solution

const toRGBArray = rgbStr => rgbStr.match(/\d+/g).map(Number);

toRGBArray('rgb(255, 12, 0)'); // [255, 12, 0]

>
> Converting between other color formats and rgb() might be a prerequisite in many cases. This topic is covered in length in a previous article.
In order to convert an rgb() color string to an array of values, you can use String.prototype.match() to get an array of 3 strings with the numeric values, and then use Array.prototype.map() in combination with Number to convert them into an array of numeric values.
Subsequently, you can use array destructuring on top of the previous approach to store the values into named variables and create an appropriate object from them. This allows you to convert an rgb() color string to an object with the values of each color.

Code Snippets

const toRGBArray = rgbStr => rgbStr.match(/\d+/g).map(Number);

toRGBArray('rgb(255, 12, 0)'); // [255, 12, 0]

const toRGBObject = rgbStr => {
  const [red, green, blue] = rgbStr.match(/\d+/g).map(Number);
  return { red, green, blue };
};

toRGBObject('rgb(255, 12, 0)'); // {red: 255, green: 12, blue: 0}

Context

From 30-seconds-of-code: rgb-to-array-or-object

Revisions (0)

No revisions yet.