通过JavaScript获取所有命名的CSS颜色

有没有办法通过JavaScript以编程方式生成浏览器支持的所有命名CSS颜色的列表？（例如，

红色

，

绿色

，

阿里蓝

等）

---

注意：我不是要一个列表，我要找的是更类似于

document.body.style

，它返回一个包含浏览器支持的所有css属性的对象。

我猜你能得到的关闭列表是从预编译的颜色名称列表开始的，并检查浏览器是否支持该颜色。可以使用指定颜色

div.stlye.backgroundColor = '';
div.style.backgroundColor = potentialColor;

并使用

var actualColorString = window.getComputedStyle(div).background; 

如果指定的颜色无效（或为黑色），则颜色字符串以开头

rgba(0, 0, 0, 0)

否则它是一个已知的css颜色名称

下面是一些JSFIDLE来演示颜色检查：

我使用此方法为我的项目创建颜色枚举：

下面是作为JSFIDLE备份的部分代码：

<div id='color-element'></div>

---

//颜色名称的来源：https://simple.wikipedia.org/wiki/List_of_colors
常量colorNames=[
‘苋菜’，
//...
];
//颜色名称的另一个来源：https://gist.github.com/bobspace/2712980
常量cssColorNames=[
“AliceBlue”，
“古董白”，
//...
];
//颜色名称的另一个来源：https://chir.ag/projects/ntc/ntc.js
变量扩展颜色=[
[“000000”，“黑色”]，
[“000080”，“海军蓝”]，
//...
];
函数camelize（str）{//源：https://stackoverflow.com
/问题/2970525/将任何字符串转换为驼峰大小写
var camelString=str.replace（/（？：^\w|[A-Z]|\b\w）/g，函数（字，索引）{
返回索引===0？word.toLowerCase（）：word.toUpperCase（）；
}).替换（/\s+/g'，）；
返回camelString.replace（//\//g'，）.replace（//-/g'，）.replace（//'/g'，）；
}
函数rgba2hex（orig）{//源：https://stackoverflow.com/questions/49974145/how-to-convert-rgba-to-hex-color-code-using-javascript
var a，百分之，
rgb=原始替换（/\s/g'）。匹配（/^rgba？\（（\d+）、（\d+）、（\d+）、（\d+）、（[^、\s）]+）？/i），
alpha=（rgb&&rgb[4]| |“”）.trim（），
十六进制=rgb？
（rgb[1]| 1您可以使用rgb.0到255.rgb（0,1,3）生成所有这些没有列表。@epascarello说所有列表都是完整的列表不是很准确吗？@rmn OP想要一个由JavaScript代码生成的列表，而不是第三方列表。OP可以获取一个预编译的列表并运行它，看看颜色名称是否与十六进制代码匹配，但仍然不是他们想要的，但可能是OP能得到的最好的东西可以识别的颜色名称列表必须在浏览器代码中的某个地方，但是没有任何东西可以让JS使用。
//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);
  }
  
  
}