在JavaScript中解析CSS颜色的最有效方法是什么？

function parseColor(input) {    var m;

显然，数值比名称更容易解析。所以我们先做那些。

    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 [ parseInt(m.charAt(0),16)*0x11, parseInt(m.charAt(1),16)*0x11, parseInt(m.charAt(2),16)*0x11        ];    }

那是一个 现在获取完整的六位数格式：

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

现在是

rgb()

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

另外，您还可以添加支持

rgba

hsl

hsla

最后，命名的颜色。

    return ({        "red":[255,0,0],        "yellow":[255,255,0],        // ... and so on. Yes, you have to define ALL the colour pres.    })[input];

并关闭功能：

}

其实，我不知道为什么要麻烦写这些。我刚刚注意到您指定了“假设使用主要的浏览器”，我想这也意味着“最新”吗？如果是这样的话…

function parseColor(input) {    var div = document.createElement('div'), m;    div.style.color = input;    m = getComputedStyle(div).color.match(/^rgbs*(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.");}

最新的浏览器会将任何给定的颜色转换

rgb()