细探颜色值

来源：互联网发布：资海网络集团员工待遇编辑：程序博客网时间：2024/05/22 04:46

各种类型的颜色值

与颜色有关的属性或值一共有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只会让元素的某些部分有透明效果

0 0