css颜色

Posted 2022-10-21 niuyaomin

颜色

如果我们相给页面设置颜色可以采用多种方法进行设置：

一、命名颜色

假设在设置页面的颜色时觉得一部分很小的颜色集中就足够了，就可以直接给定颜色的名称。CSS称这些有名称的颜色为命名颜色。

命名颜色的关键字有限，css定义了17个标准色：浅绿色，黑色，蓝色，紫红色，灰色，橙色，绿色，石灰，栗色，海军，橄榄，紫，红，银，蓝绿色，白色和黄色。

颜色名	颜色	颜色名	颜色
aqua	浅绿色	black	黑色
blue	蓝色	fuchsia	栗色
gray	灰色	green	绿色
lime	石灰	maroon	紫红色
navy	海军	olive	橄榄
orange	橙色	purple	紫色
red	红色	sliver	银色
teal	蓝绿色	white	白色
yellow	黄色

 

有的时候也许使用其他颜色值，并不在标准颜色之内的颜色也可以使用，它之所以能起作用，原因是大多数的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%，如果用户代理忽略小数点，就会把这些值取整为与之最接近的整数。当然整数取值法只能使用整数。如下所示：

h2color:rgb(25.5%，40%，98.2%)   转换为   h2color:rgb(26%，40%，98%)  

无论哪种记法，如果值落在可取范围之外，都会变动到最接近的范围边界。当一个值大于100%或是小于0%都会默认的调整到100%或0%（这是可取的最大和最小值）

h2color:rgb(200%，-40%，0%)   转换为   h2color:rgb(100%，0%，0%)   

h2color:rgb(42，500，-20)  转换为h2color: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

如 h2color:#FFF=h2color:#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安全颜色的例子。