据称由于 HTML5 没有修改专属的颜色，HTML4 的颜色都可以在 HTML5 中正确显示。
出自 HTML4 规范的可用颜色字符串值列表如下，此表来源是 http://www.lovean.com/view-3-132910-0.html , 我把原表中的“石灰色”修改成了“青柠色”，因为这更符合该颜色的原意（原表中把lime翻译成石灰色不知怎么回事）。另外原表是图片格式的，不方便拷贝，下表是文本格式的，可以直接拷贝使用。
| 序号 | 汉字名称 | 英语名称 | 十六进制颜色值 |
| 1 | 黑色 | black | #000000 |
| 2 | 绿色 | green | #008000 |
| 3 | 银色 | silver | #c0c0c0 |
| 4 | 青柠色 | lime | #00ff00 |
| 5 | 灰色 | gray | #808080 |
| 6 | 白色 | white | #ffffff |
| 7 | 黄色 | yellow | #ffff00 |
| 8 | 栗色 | maroon | #800000 |
| 9 | 海蓝色 | navy | #000080 |
| 10 | 红色 | red | #ff0000 |
| 11 | 蓝色 | blue | #0000ff |
| 12 | 紫色 | purple | #800080 |
| 13 | 蓝深绿色 | teal | #008080 |
| 14 | 紫红色 | fuchsia | #ff00ff |
| 15 | 浅蓝绿色 | aqua | #00ffff |
因为网络文章不是那么可信，有必要自己验证一下，于是我将这些颜色在Canvas里显示了一下，确定没有问题，显示效果如下：
显示这些颜色的代码如下：
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>出自 HTML4 规范的可用颜色字符串值列表</title> </head> <body onload="draw()"> <canvas id="myCanvus" width="240px" height="470px" style="border:1px dashed black;"> 出现文字表示你的浏览器不支持HTML5 </canvas> </body> </html> <script type="text/javascript"> <!-- function draw(){ var canvas=document.getElementById('myCanvus'); canvas.height=470; canvas.width=240; var context=canvas.getContext('2d'); context.fillStyle = "#88aacc"; context.fillRect(0, 0, canvas.width, canvas.height); var colors=[ {'title':'黑色', 'name':'black','hex':'#000000'}, {'title':'绿色', 'name':'green','hex':'#008000'}, {'title':'银色', 'name':'silver','hex':'#c0c0c0'}, {'title':'青柠色', 'name':'lime','hex':'#00ff00'}, {'title':'灰色', 'name':'gray','hex':'#808080'}, {'title':'白色', 'name':'white','hex':'#ffffff'}, {'title':'黄色', 'name':'yellow','hex':'#ffff00'}, {'title':'栗色', 'name':'maroon','hex':'#800000'}, {'title':'海蓝色', 'name':'navy','hex':'#000080'}, {'title':'红色', 'name':'red','hex':'#ff0000'}, {'title':'蓝色', 'name':'blue','hex':'#0000ff'}, {'title':'紫色', 'name':'purple','hex':'#800080'}, {'title':'蓝深绿色','name':'teal','hex':'#008080'}, {'title':'紫红色', 'name':'fuchsia','hex':'#ff00ff'}, {'title':'浅蓝绿色', 'name':'aqua','hex':'#00ffff'}, ]; var x=10; var y=0; // 遍历JSON for(var i=0; i<colors.length; i++) { y+=30; var color=colors[i]; //alert(color.title+" -" + color.name+" -" + color.hex) context.font="bold 16px 宋体"; context.fillStyle=color.name; context.fillText(color.title+"," + color.name+" ," + color.hex ,x,y); } }; //--> </script>
2017年9月5日09:02:35