所有的颜色都可以由红, 绿, 蓝三原色调配而成. CSS 中用 8 位表示一个颜色, 那么可以有 28 即 256 种颜色, 所以总共可以表示 256256256 种颜色. CSS 纵有多种颜色表示:
十六进制表示法:
可表示为:#RRGGBB, 其中 RR(红色),GG(绿色)和 BB(蓝色). 所有值必须介于 0 和 FF 之间.
例如:#0000FF 值呈现为蓝色, 因为蓝色的组成设置为最高值 (FF) 而其他设置为 0. 也可表示为:#RGB, 值也必须为 0 到 f 之间, 例如:#00f 表示为蓝色.
<p style="color: #ff0000">十六进制颜色</p>
rgb 表示法:
表示法为: RGB(红, 绿, 蓝). 每个参数 (红色, 绿色和蓝色) 定义颜色的亮度, 可在 0 和 255 之间, 或一个百分比值 (从 0%到 100%) 之间的整数.
例如: rgb(0,0,255), 表示为蓝色, 值越高, 颜色混合占比越多. rgba 表示法: 表示法为: RGBA(红, 绿, 蓝, alpha). Alpha 参数是一个介于 0.0(完全透明)和 1.0(完全不透明)之间的参数.
<p style="color: RGB(256,0,0)">RGB 颜色</p>
RGBA(Alpha)表示法:
在 RGB 的基础上增加了透明度分量, 该分量的取值为 0~1.0 之间变化
<p style="color: RGBA(256,0,0,0.1)">RGB 颜色</p>
hsl 色相表示法:
表示法为: HSL(色调, 饱和度, 明度). 色相是在色轮上的程度 (从 0 到 360)-0(或 360) 是红色的, 120 是绿色的, 240 是蓝色的. 饱和度是一个百分比值; 0%意味着灰色和 100%的阴影, 是全彩. 亮度也是一个百分点; 0%是黑色的, 100%是白色的.
<p style="color: HSL(120,50%,50%)">HSL</p>
hsla 色相表示法:
表示法为: HSLA(色调, 饱和度, 亮度,α),α是 Alpha 参数定义的不透明度. Alpha 参数是一个介于 0.0(完全透明)和 1.0(完全不透明)之间的参数.
<p style="color: HSLA(120,50%,50%,0.1)">HSLA</p>
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法(详细的前端项目实战教学视频, PDF)
来源: http://www.jianshu.com/p/131d10c4413c