我猜你可以得到的关闭是从一个预编译的颜色名称列表开始，并检查浏览器是否支持该颜色。您可以分配颜色与
div.stlye.backgroundColor = '';
div.style.backgroundColor = potentialColor;
并使用
检索实际颜色信息
var actualColorString = window.getComputedStyle(div).background;
如果分配的颜色无效（或黑色），颜色字符串以
开头
rgba(0, 0, 0, 0)
否则它是一个已知的 css 颜色名称。
这里有一些 jsfiddle 来演示颜色检查：
https://jsfiddle.net/tc8f5pgy/4/
我使用这种方法为我的项目创建了一个 Color 枚举：
https://github.com/stefaneidelloth/treezjs/blob/master/src/components/color/color.js
下面是作为 jsfiddle 备份的部分代码：
<div id='color-element'></div>
//source of color names: https://simple.wikipedia.org/wiki/List_of_colors
const colorNames = [
'Amaranth',
//...
];
//another source of color names: https://gist.github.com/bobspace/2712980
const cssColorNames = [
"AliceBlue",
"AntiqueWhite",
//...
];
//another source of color names: https://chir.ag/projects/ntc/ntc.js
var extendedColors = [
["000000", "Black"],
["000080", "Navy Blue"],
//...
];
function camelize(str) { //source: https://stackoverflow.com
/questions/2970525/converting-any-string-into-camel-case
var camelString= str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
return index === 0 ? word.toLowerCase() : word.toUpperCase();
}).replace(/\s+/g, '');
return camelString.replace(/\//g,'').replace(/-/g,'').replace(/'/g,'');
}
function rgba2hex(orig) { //source: https://stackoverflow.com/questions/49974145/how-to-convert-rgba-to-hex-color-code-using-javascript
var a, isPercent,
rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
alpha = (rgb && rgb[4] || "").trim(),
hex = rgb ?
(rgb[1] | 1 << 8).toString(16).slice(1) +
(rgb[2] | 1 << 8).toString(16).slice(1) +
(rgb[3] | 1 << 8).toString(16).slice(1) : orig;
if (alpha !== "") {
a = alpha;
} else {
a = 01;
}
// multiply before convert to HEX
a = ((a * 255) | 1 << 8).toString(16).slice(1)
hex = hex + a;
return hex;
}
function handleActualColor(name, rgbaColorString){
var hexColorString = rgba2hex(rgbaColorString);
var output = "Color." + name + " = new Color('"+ name +"','#"+ hexColorString + "');"
console.log(output);
}
var potentialColorSet = new Set();
for(var colorName of colorNames){
potentialColorSet.add(camelize(colorName));
}
for(var colorName of cssColorNames){
potentialColorSet.add(camelize(colorName));
}
for(var entry of extendedColors){
var colorName = entry[1];
potentialColorSet.add(camelize(colorName));
}
var potentialColors = Array.from(potentialColorSet).sort();
var div = document.getElementById('color-element');
for(var potentialColor of potentialColors){
div.style.backgroundColor = '';
div.style.backgroundColor = potentialColor;
var actualColorString = window.getComputedStyle(div).background;
var endIndex = actualColorString.indexOf(')');
var rgbaColorString = actualColorString.substring(0, endIndex+1);
if(rgbaColorString !== 'rgba(0, 0, 0, 0)'){
handleActualColor(potentialColor, rgbaColorString);
if(potentialColor == 'screaminGreen'){
throw new Error('foo');
}
}
if(potentialColor.toLowerCase() === 'black'){
handleActualColor(potentialColor, rgbaColorString);
}
}