细探颜色值

各种类型的颜色值

与颜色有关的属性或值一共有8个

transparent——IE8及更早的版本不支持，显示为black

color_name——包括16各基本颜色关键字，28各系统颜色，多个SVG颜色关键字

hex——16进制型颜色值，#rrggbb或#rgb，每个参数值取值范围00~ff

rgb，——rgb ( r , g , b )，r指red，g指green，b指blue，每个参数取值范围0~255 / 0.0%~100.0%

hsl——能直接推测出大致的颜色，这个值得研究一翻，hsl (h, s, l )，三个参数分别是色相（0~360）、饱和度（0.0%~100.0%）、亮度（0.0%，100.0%）

rgba——a就是alpha，在原来的基础上加个0~1之间的值即可，1为完全不透明，IE8及更早版本不支持

hsla——a就是alpha，在原来的基础上加个0~1之间的值即可，1为完全不透明，IE8及更早版本不支持

opacity——取值范围为0~1，1为完全不透明，‘0.5’可缩写成‘.5

 

很好的在线配色网站Color Scheme Designer

Q&A

如何通过HSL值猜出大致的颜色？

如hsl( 355, 90%, 80%)

HSL的色相：60度是黄色，120度是绿色，180度是青色，240度是蓝色，300度是洋红，360度为红色，顺口溜“YoungGuys Can Be Messy Rascals”；

HSL的亮度：0%是全黑，100%是全白，像让颜色变深一点就减少百分比值

由此可知hsl( 355, 90%, 80%)就是很接近红色且比红色浅的颜色。

 

IE8及更早版本的浏览器不支持RGB和 HSL，如何解决这个问题？

在GRB和HSL值前添加对应的hex值

如｛color: #fe0208; color: hsl( 359, 99%, 50%); ｝

 

为什么opacity不实用?

用opacity设置透明度会对整个元素产生影响（元素的内容都会透明），而使用rgba和hsla只会让元素的某些部分有透明效果