CSS - 颜色

  1. 十六进制色值
  2. RGB色值

  • 作者：KK

  • 发表日期：2016.1.26

  • 学习本章节前你最好先知道一下什么叫十六进制

十六进制色值

CSS可以设置元素的背景色,文字颜色,阴影颜色等,这时候都需要颜色

通过前面一些例子你已经了解到类似background-color:red;这样的样式属性是将一个背景颜色设置为红色的了,因为red就是红色的意思嘛

可是你要深红色怎么办?用哪个词?再深一点呢?总的来说,所有颜色不同色深不同亮度组合,成千上万种哦

所以要表示很具体的颜色,就需要用十六进制数表示才能足够具体,其实也不只是它,还有rgb色值也可以表达,二进制也可以...反正用英文单词就不足够.

好了不念经了,我们来试一下一些色值:

body{background:#FF0000}  /*鲜红色*/
body{background:#FF0001}  /*鲜红色深1点*/
body{background:#FF0002}  /*鲜红色深2点*/
body{background:#FF0003}  /*鲜红色深3点*/
body{background:#FF0E03}  /*鲜红色深NN点*/
body{background:#5792C9}  /*天蓝色*/
body{background:#656565}  /*灰色*/
body{background:#4B973A}  /*浅绿色*/
body{background:#E9A84B}  /*深橙色*/

喔,这些就是用十六进制表示的颜色值,最小值是#000000(黑色),最大值是#FFFFFF(白色)

简写色值

另外十六进制色是可以简写的,当十六进制数的第1 2,第3 4,第5 6位的值是一样时就可以简写成#ABC类似这样只有3位的简写方式

比如#FF0000这个是鲜红色的十六进制色值,

  • 第1 2位都相同,因为都是F

  • 第3 4位都相同,因为都是0

  • 第5 6位都相同,因为都是0

于是可以简写成#F00

RGB色值

CSS还支持使用RGB色值,比如

body{background-color:rgb(255, 0, 0);} /*鲜红色*/

这时候颜色的值是rgb(255, 0, 0),我们主要讲那3个数字

  • 第1个数字是红色的色值

  • 第2个数字是绿色的色值

  • 第3个数字是蓝色的色值

每个色值可以从0到255的范围内填写一个数字进去,超出的是非法色值

rgb(255, 0, 0)的意思我们通俗地说就是255点红色+0点绿色+0点蓝色混合成一个颜色,最终还是红色,于是你试下混150点绿色进去

body{background-color:rgb(255, 150, 0);}

哈哈,效果怎样?由于有绿色的加入,鲜红色被淡化成了黄色对吧?那么你也可以再试下加点蓝色,减一点红色又会变成什么颜色咯

这就是RGB颜色表示法了,通过描述红,绿和蓝三种颜色的不同浓度混合变成新的颜色

其实你应该记得颜料也是这样的,你用一些绿色的颜料和很多红色的颜料混合搅混它们,就会变成一个新的颜色咯