颜色教程
颜色通过结合红色、绿色和蓝色光来显示。
颜色名称
使用 CSS,颜色可以通过使用颜色名称来设置
CSS 颜色值
使用 CSS,颜色可以通过多种方式指定
- 按颜色名称
- 作为 RGB 值
- 作为十六进制值
- 作为 HSL 值 (CSS3)
- 作为 HWB 值 (CSS4)
- 使用
currentcolor
关键字
RGB 颜色
RGB 颜色值在所有浏览器中都受支持。
RGB 颜色值指定为:rgb( RED , GREEN , BLUE )。
每个参数定义颜色的强度,为一个介于 0 和 255 之间的整数。
例如,rgb(0,0,255) 显示为蓝色,因为蓝色参数设置为其最高值 (255),而其他参数设置为 0。
灰色调通常使用所有三种光源的相同值来定义
十六进制颜色
十六进制颜色值在所有浏览器中都受支持。
十六进制颜色指定为:#RRGGBB.
RR (红色)、GG (绿色) 和 BB (蓝色) 是介于 00 和 FF 之间的十六进制整数,用于指定颜色的强度。
例如,#0000FF 显示为蓝色,因为蓝色分量设置为最高值 (FF),而其他分量设置为 00。
灰色调通常使用所有三种光源的相同值来定义
示例
颜色 | HEX | RGB | 颜色 |
---|---|---|---|
#000000 | rgb(0,0,0) | 黑色 | |
#808080 | rgb(128,128,128) | 灰色 | |
#FFFFFF | rgb(255,255,255) | 白色 |
大写或小写?
您可以 O使用大写或小写字母来指定十六进制值。
小写更容易输入。大写更容易阅读。
颜色名称
CSS 支持 140 种标准颜色名称。
在下一章中,您将找到按字母顺序列出的完整颜色名称及其十六进制值列表
颜色名称 | 十六进制 | 颜色 |
---|---|---|
爱丽丝蓝 | #F0F8FF | |
古董白 | #FAEBD7 | |
水绿色 | #00FFFF | |
海蓝色 | #7FFFD4 | |
蔚蓝色 | #F0FFFF | |
米色 | #F5F5DC | |
杏仁白 | #FFE4C4 |
currentcolor 关键字
关键字 currentcolor
指的是元素的 color 属性的值。
示例
以下 <div> 元素的边框颜色将是蓝色,因为 <div> 元素的文本颜色是蓝色。
#myDIV {
color: blue; /* 蓝色文本颜色 */
border: 10px solid currentcolor; /* 蓝色边框颜色 */
}
自己动手试一试 »