颜色教程
通过红光、绿光和蓝光组合显示颜色。
颜色名称
使用 CSS,可以使用颜色名称设置颜色:
CSS 颜色值
使用 CSS,可以通过不同的方式指定颜色:
- 按颜色名称
- 作为 RGB 值
- 作为十六进制值
- 作为 HSL 值 (CSS3)
- 作为 HWB 值 (CSS4)
- 随着
currentcolor
关键词
RGB 颜色
所有浏览器都支持 RGB 颜色值。
RGB 颜色值通过以下方式指定:rgb( 红色的 , 绿色的 , 蓝色的 ).
每个参数将颜色的强度定义为 0 到 255 之间的整数。
例如,rgb(0,0,255) 被渲染为蓝色,因为蓝色参数设置为其最高值(255),而其他参数设置为 0。
灰色阴影通常使用所有 3 个光源的相同值来定义:
十六进制颜色
所有浏览器也支持十六进制颜色值。
十六进制颜色用以下方式指定:#无线电规则GGBB.
RR(红色)、GG(绿色)和 BB(蓝色)是 00 到 FF 之间的十六进制整数,表示颜色的强度。
例如,#0000FF 显示为蓝色,因为蓝色成分设置为其最高值 (FF),而其他成分设置为 00。
灰色阴影通常使用所有 3 个光源的相同值来定义:
例子
颜色 | 十六进制 | RGB | 颜色 |
---|---|---|---|
#000000 | RGB(0,0,0) | 黑色的 | |
#808080 | RGB(128,128,128) | 灰色的 | |
#FFFFFF | RGB(255,255,255) | 白色的 |
大写还是小写?
您可以使用大写或小写字母来指定十六进制值。
小写字母较易书写,大写字母较易阅读。
颜色名称
CSS 支持 140 种标准颜色名称。
在下一章中,您将找到按十六进制值按字母顺序排列的颜色名称完整列表:
颜色名称 | 十六进制 | 颜色 |
---|---|---|
艾丽丝布鲁 | #F0F8FF | |
古董白 | #FAEBD7 | |
水蓝色 | #00FFFF | |
蓝晶 | #7FFFD4 | |
Azure | #F0FFFF | |
浅褐色的 | #F5F5DC | |
浓汤 | #FFE4C4 |
currentcolor 关键字
这 currentcolor
关键字指的是元素的颜色属性的值。
例子
下面的边框颜色 <div>
元素将为蓝色,因为文本颜色<div>
元素为蓝色:
#我的DIV{
颜色:蓝色;/*蓝色文本颜色*/
border: 10px solid currentcolor; /* 蓝色边框颜色 */
}
亲自尝试 »