出自 HTML4 规范的可用颜色字符串值列表（常用颜色名称及对应的十六进制值）...

最新推荐文章于 2023-12-13 15:14:31 发布

weixin_34121304

最新推荐文章于 2023-12-13 15:14:31 发布

阅读量484

点赞数

文章标签： javascript json ViewUI

据称由于 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

weixin_34121304

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
出自 HTML4 规范的可用颜色字符串值列表（常用颜色名称及对应的十六进制值）...

据称由于 HTML5 没有修改专属的颜色，HTML4 的颜色都可以在 HTML5 中正确显示。出自 HTML4 规范的可用颜色字符串值列表如下，此表来源是 http://www.lovean.com/view-3-132910-0.html , 我把原表中的“石灰色”修改成了“青柠色”，因为这更符合该颜色的原意（原表中把lime翻译成石灰色不知怎么回事）。另外原表是图片格式的，不方便拷贝，下表...
复制链接

扫一扫