网页设计学习笔记

HTML,CSS,JavaScript

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: :: 管理 ::

在 CSS 中我们可以设定用 color 和 background-color 设定元素的前景色和背景色。例如:

a {
    color: #123456;
    background-color: #ABCDEF;
}

CSS2 中使用的是 24位 RGB 颜色:即一个颜色由红绿蓝三部分组成,每部分用两位 16 进制数表示,总共可以表示 2^24 = 16777216 种不同的颜色。在 RGB 颜色中,最小值 #000000 表示黑色,而最大值 #FFFFFF 表示白色,而 #FF0000,#00FF00 和 #0000FF 分别表示纯红色,纯绿色和纯蓝色。

RGB 颜色值还有其它的表示方式:#3366CC 可以简写为 #36C,也可以用十进制来表示为 rgb(51,102,204),甚至可以用百分比来表示为 rgb(20%, 40%, 80%)。

要记住各种常用颜色的 RGB 数值是不容易的,因此在 HTML 4.0 中定义了 16 种标准颜色名称:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow。而 CSS 2 中增加了 orange 颜色,我们也可以在 CSS 中直接使用这 17 种颜色名称。这些颜色以及对应的数值可以看这里

实际上主流浏览器还支持更多的 X11 颜色名称,这些名称在 SVG 1.0 和 CSS 3 中被标准化,因此也可以放心地使用。这些颜色已经对应的数值可以看这里

CSS 3 中还支持使用 HSL 色彩空间的颜色值,即用色相(Hue),饱和度(Saturation)和亮度(Lightness)来确定一个颜色。其中色相的取值为 0 到 360(不包含 360),它确定是什么颜色;而饱和度和亮度的取值为 0% 到 100%,它们分别确定颜色的深浅和明暗。颜色的这种 HSL 表示比 RGB 表示更加自然,也方便我们选取一组相同饱和度和亮度的颜色。

要在 CSS 中使用 HSL 颜色,也很简单,例如 orange 颜色的 RGB 值为 #FFA500,我们用 HSL Picker 中可以看到它的 HSL 值为 hsl(39, 100%, 50%),因此在 CSS 文件中这样写就可以了:

a {
    color: hsl(39, 100%, 50%)  
}  

另外,CSS3 中的也可以使用 rgba 和 hsla 方式的颜色,即在最后加上 alpha 值表示不透明度,alpha 值在 0 到 1 之间,0 表示完全透明,1表示完全不透明。

参考资料:
[1] W3C HTML 4.0 - Colors
[2] W3C CSS 2 - Colors and Backgrounds
[3] W3C CSS 2 - Color Units
[4] W3C CSS 3 - Extended Color Keywords
[5] W3C CSS 3 - HSL Color Values
[6] Wikipedia - Web Colors
[7] Wikipedia - HSL and HSV
[8] Wikipedia - RGBA Color Space
[9] HSL Color Picker - by Brandon Mathis

posted on 2013-06-01 10:53  zoho  阅读(389)  评论(0编辑  收藏  举报