3.css中的颜色

Posted 2020-07-10 scolia

　　css中颜色的设置形式主要有三种方式：颜色名称、十六进制代码和十进制代码。

　　在古老的 html4 时，颜色名称只有 16 种。

颜色名称	十六进制代码	十进制代码	含义
black	#000000	0,0,0	黑色
silver	#c0c0c0	192,192,192	银色
gray	#808080	128,128,128	灰色
white	#ffffff	255,255,255	白色
maroon	#800000	128,0,0	栗色
red	#ff0000	255,0,0	红色
purple	#800080	128,0,128	紫色
fuchsia	#ff00ff	255,0,255	紫红
green	#008000	0,128,0	绿色
lime	#00ff00	0,255,0	闪光绿
olive	#808000	128,128,0	橄榄色
yellow	#ffff00	255,255,0	黄色
navy	#000080	0,0,128	海军蓝
blue	#0000ff	0,0,255	蓝色
teal	#008080	0,128,128	水鸭色
aqua	#00ffff	0,255,255	浅绿色

 

　　当然，目前颜色名称远远不止这些，可以搜索更多的 HTML 颜色表或 CSS 颜色表查阅。 这里提供一些页面如下：

　　http://xh.5156edu.com/page/z1015m9220j18754.html

　　http://finle.me/colors.html

　　http://www.w3school.com.cn/tags/html_ref_colornames.asp

---

 

1.颜色名称形式

p {
    color: red;
}

 

---

2.十六进制形式

p {
    color: #ff0000;　　/*可简写成：f00*/
}

 

补充：十六进制可以使用简写形式，其要求是从头开始，字符两两一组，且组内字符相同，如上所示。（像#8000080就不可以）

---

3.十进制形式

　　十进制表示方法就比较多样化，有四种方案：

函数	说明	实例
rgb(r,g,b)	用 RGB 模型表示颜色	rgb(0,128,128)
rgba(r,g,b,a)	同上，a 表示透明度 0~1 之间	rgba(0,128,128,0.5)
hsl(h,s,l)	用 HSL 模型（色相、饱和度 和透明度）来表示颜色	hsl(120,100%,30%)
hsla(h,s,l,a)	同上， a 表示透明度 0~1 之间	hsla(120,100%,30%,0.5)

 

p {
    color: rgb(112, 128, 114);
    color: rgba(0, 128, 128, 0.5);
    color: hsl(120, 100%, 30%); 
    color: hsla(120, 100%, 30%, 0.5);
}

 

　　目前又有一个疑问，这些值从哪里获取。除了颜色表之外，想要微调自己的颜色值。我们可以使用 photoshop 等平面设计软件的调色板获取相应的值。