颜色
如果我们相给页面设置颜色可以采用多种方法进行设置:
一, 命名颜色
假设在设置页面的颜色时觉得一部分很小的颜色集中就足够了, 就可以直接给定颜色的名称. CSS 称这些有名称的颜色为命名颜色.
命名颜色的关键字有限, CSS 定义了 17 个标准色: 浅绿色, 黑色, 蓝色, 紫红色, 灰色, 橙色, 绿色, 石灰, 栗色, 海军, 橄榄, 紫, 红, 银, 蓝绿色, 白色和黄色.
有的时候也许使用其他颜色值, 并不在标准颜色之内的颜色也可以使用, 它之所以能起作用, 原因是大多数的 web 浏览器能识别多达 140 个颜色, 包括前面说的 17 种颜色.
(二),RGB 指定颜色
计算机通过组合不同的红色, 蓝色, 绿色分量来创造颜色. 这种组合通常被称为 RGB 颜色. 可以直接访问这些颜色, 通过调整红, 绿, 蓝分量来最大限度的控制颜色. 所有浏览器都支持 RGB 颜色值.
RGB 颜色值是这样规定的: rgb(red, green, blue). 每个参数 (red,green 以及 blue) 定义颜色的强度, 可以是整数三元组表示法: 参数介于 0 与 255 之间的整数, 或者是百分比值 (从 0% 到 100%).
百分数记法: 分别指定白色和黑色, 值将指定为:
- rgb(100%,100%,100%)
- rgb(0%,0%,0%)
整数三元组记法, 相同的颜色表示如下
- rgb(255,255,255)
- rgb(0,0,0)
在百分数记法中也可以使用分数, 假设如果向指定某一颜色的红色分量为 25.5%, 绿色分量为 40%, 蓝色分量为 98.2%, 如果用户代理忽略小数点, 就会把这些值取整为与之最接近的整数. 当然整数取值法只能使用整数. 如下所示:
h2{color:rgb(25.5%,40%,98.2%)} 转换为 h2{color:rgb(26%,40%,98%)}
无论哪种记法, 如果值落在可取范围之外, 都会变动到最接近的范围边界. 当一个值大于 100% 或是小于 0% 都会默认的调整到 100% 或 0%(这是可取的最大和最小值)
h2{color:rgb(200%,-40%,0%)} 转换为 h2{color:rgb(100%,0%,0%)}
h2{color:rgb(42,500,-20)} 转换为 h2{color:rgb(42,255,0)}
假设有一个颜色为 rgb(25%,37.5%,60%), 将其转换为整数记法, 百分数乘以 255, 就会得到 63.75,95.625,153. 再将这些值取整为最接近的整数, 记得到了 rgb(64,96,153).
(三), 十六进制 RGB 颜色
所有浏览器都支持十六进制颜色值.
十六进制颜色是这样规定的:#RRGGBB, 其中的 RR(红色),GG(绿色),BB(蓝色) 十六进制整数规定了颜色的成分. 所有值必须介于 0 与 FF 之间. 大写小写都可以.
如果组成十六进制的三组数各自都是成对的, 还允许一种简写方法, 这种写法一般都是 #RGB
如 h2{color:#FFF}=h2{color:#FFFFFF}
浏览器会取一位, 并将其复制成两位. 因此 #FF0000 等价于 #F00.
(四),RGBA 颜色值
RGBA 颜色值得到以下浏览器的支持: IE9+,Firefox 3+,Chrome,Safari 以及 Opera 10+.
RGBA 颜色值是 RGB 颜色值的扩展, 带有一个 alpha 通道 - 它规定了对象的不透明度.
RGBA 颜色值是这样规定的: rgba(red, green, blue, alpha).alpha 参数是介于 0.0(完全透明) 与 1.0(完全不透明) 的数字.
(五),HSL 颜色
HSL 颜色值得到以下浏览器的支持: IE9+,Firefox,Chrome,Safari 以及 Opera 10+.
HSL 指的是 hue(色调),saturation(饱和度),lightness(亮度) - 表示颜色柱面坐标表示法.
HSL 颜色值是这样规定的: hsl(hue, saturation, lightness).
Hue 是色盘上的度数 (从 0 到 360) - 0 (或 360) 是红色, 120 是绿色, 240 是蓝色. Saturation 是百分比值; 0% 意味着灰色, 而 100% 是全彩. Lightness 同样是百分比值; 0% 是黑色, 100% 是白色.
(六),HSLA 颜色
HSLA 颜色值得到以下浏览器的支持: IE9+,Firefox 3+,Chrome,Safari 以及 Opera 10+.
HSLA 颜色值是 HSL 颜色值的扩展, 带有一个 alpha 通道 - 它规定了对象的不透明度.
HSLA 颜色值是这样规定的: hsla(hue, saturation, lightness, alpha), 其中的 alpha 参数定义不透明度. alpha 参数是介于 0.0(完全透明) 与 1.0(完全不透明) 的数字.
(七),Web 安全颜色
Web 安全颜色是指, 在 256 色计算机系统上可以避免抖动的颜色, 保证网页颜色可以正确显示. Web 安全颜色可以表示为 RGB 值 20% 和 51(相应的十六进制值为 33) 的倍数. 另外, 0% 或 0 也是一个安全值.
如果使用 RGB 百分数, 要让所有这三个分量要么是 0%, 要么是能被 20 整除的数值, 例如 rgb(40%,100%,80%) 或 rgb(60%,0%,0%).
如果使用 0~255 范围的 RGB 值, 则分量要么是 0, 要么是能被 51 整除的数, 如 rgb(0,204,153) 或 rgb(255,0,102)
采用十六进制记法, 使用值为 00,33,66,99,CC 和 FF 的三元组都认为是 Web 安全的. 这种例子还有 #669933,#00CC66 和 #FF00FF. 这说明, Web 安全颜色的简写十六进制值是 0,3,6,9,C 和 F. 因此 #693,#0C6,#F0F 都是 Web 安全颜色的例子.
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/a086de8b1df2