网页设计师的十六进制RGB颜色

  • 2018-08-25 21:12:10
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

CSS允许你使用HTML 网页设计师很熟悉的十六进制颜色记法来定义颜色:

h1 {color:#FF0000;} /* set *Hls to red */

h2 {color:#903BC0;} /* set H2s to a dusky purple */

h3 {color:#000000;} /* set H3s to black */

h4 {color:#808080;} /* set H4s to medium gray */

到目前为止,计算机使用“十六进制记法”已经有相当长的时间,网页开发人员往往会经过培训或由实战经验来了解如何使用十六进制。由于他们对十六进制记法相当熟悉,所以在老式的HTML中往往会使用十六进制记法来设置颜色。这种做法也沿袭到了CSS中。以下介绍其工作原理:将三个介于00~FF的十六进制数连起来,就可以设置一种颜色。这种记法的一般语法是#RRGGBB。注意,在这三个数之间没有空格、逗号或其他分隔符。

十六进制记法在数学上等价于上一节讨论的整数三元组记法。例如,rgb(255, 255,255)就完全等价于#FFFFFF,而rgb(51,102,128>则与#336680完

全相同。你完全可以使用你想用的任何记法,无论哪一种记法,大多数用户代理给出的表示都是相同的。如果你有一个计算器;可以在十进制和十六进制之间转换,那么在这两种记法间切换相当简单。

如果组成十六进制数的3组数各自都是成对的,CSS还允许采用一种简写记法。这种记法的一般语法是#RGB:

h1 {color:#000;}/* set H1s to black */

h2 (color:#666;}/* set H2s to dark gray */

h3 {color:#FFF;}/* set H3s to wh1te */

从标记可以看到,每个颜色值中只有3位。不过,因为00~FF之间的十六进制数需要2位,而你总共只有3位,这又是怎么做到的呢?

答案是,浏览器会取每一位,井将其复制成两位。因此,#F00等价于#FF0000,#6FA与#66FFAA相同,#FFF则变成#FFFFFF,这就是white。显然,并非每种颜色都可以采用这种方式表示。例如,中灰色(medium gray)用标准十六进制记法可以写作#808080。这就不能用简写记法来表示,与其最接近的记法是#888,而这等同于#888888。

颜色汇总

对于我们前面讨论的所有颜色,表4-1做了一个总结。浏览器可能无法识别这些颜色关键字,因此,为了更为安全,要用RGB或十六进制三元组值来定义。另外,有些简写的十六进制值根本不会出现。在这些情况下,采用标准记法的较长值(6位)不能简写为3位,因为这些值不能进行复制。例如,值#880会扩展为#888800而不是#808000 (即olive)。因此,#808000没有简写版本,表中相应的项为空。

Web安全颜色

所谓“Web安全”颜色是指,在256色计算机系统上总能避免抖动的颜色。Web安全颜色可以表示为RGB值20%和51 (相应的十六进制值为33)的倍数。另外,0%或0也是一个安全值。因此,如果使用RGB百分数,要让所有这3个分量都要么是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安全颜色的例子。

当前文章标题:网页设计师的十六进制RGB颜色

当前URL:http://www.lyjtt.cn/news/wzzz/16-hexadecima-color.html

上一篇:网页设计中的颜色数值设置

下一篇:网页设计中的长度单位

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)