RGB to object

JavaScript, String, Browser, Regexp · Oct 22, 2020

Converts an rgb() color string to an object with the values of each color.

  • Use String.prototype.match() to get an array of 3 string with the numeric values.
  • Use Array.prototype.map() in combination with Number to convert them into an array of numeric values.
  • Use array destructuring to store the values into named variables and create an appropriate object from them.
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}

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • Working with color in JavaScript

    Snippet collection

    Working with color in JavaScript requires some understanding of color formats and conversions. Luckily, this snippet collection's got you covered.

  • HSL to object

    JavaScript, String

    Converts an hsl() color string to an object with the values of each color.

  • RGB to array

    JavaScript, String

    Converts an rgb() color string to an array of values.

  • HSL to array

    JavaScript, String

    Converts an hsl() color string to an array of values.