Aleksey Bykov Aleksey Bykov - 5 months ago 18x
Javascript Question

What is the most efficient way to parse a CSS color in JavaScript?

Given a string of a valid CSS color value:

  • #fff

  • #ffffff

  • white

  • rgb(255, 255, 255)

Need to get an array of numbers of the following format: [R, G, B]

What is the most efficient way of doing this in JavaScript (assuming a major browser)?

function parseColor(input) {
    var m;

Obviously, the numeric values will be easier to parse than names. So we do those first.

    m = input.match(/^#([0-9a-f]{3})$/i)[1];
    if( m) {
        // in three-character format, each value is multiplied by 0x11 to give an
        // even scale from 0x00 to 0xff
        return [

That's one. Now for the full six-digit format:

    m = input.match(/^#([0-9a-f]{6})$/i)[1];
    if( m) {
        return [

And now for rgb() format:

    m = input.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
    if( m) {
        return [m[1],m[2],m[3]];

Optionally, you can also add support for rgba format, and even hsl/hsla if you add an HSL2RGB conversion function.

Finally, the named colours.

    return ({
        // ... and so on. Yes, you have to define ALL the colour codes.

And close the function:


Actually, I don't know why I bothered writing all that. I just noticed you specified "assuming a major browser", I'm assuming that also means "up-to-date"? If so...

function parseColor(input) {
    var div = document.createElement('div'), m; = input;
    m = getComputedStyle(div).color.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
    if( m) return [m[1],m[2],m[3]];
    else throw new Error("Colour "+input+" could not be parsed.");

An up-to-date browser will convert any given colour to rgb() format in its computed style. Just get it back, and read it out.