潘通色号与rgb转换_RGBA,opacity,RGB

rgba 和 opacity 有什么区别？

1. opacity是如何作用的？

rgba是什？如何代表的？

RGBA是代表Red（红色）Green（绿色）Blue（蓝色）和Alpha的色彩空间。

Alpha和RGB的关系？

最初的概念来自于电影，电影制作需要前景和背景合成。 Mask是一种电影制作技巧，只有两种透明度，1和0，即完全透明和完全不透明。(Alpha也是在数字电影透明度做的一次改进) Alpha通道的产生是对数字合成的一大贡献。而Catmull/Smith小组开发的Alpha通道概念就方便了很多，而且可以让任何人使用Alpha通道。他们首次推出RGBA概念，即将Alpha通道和RGB通道并列，并一同存储在图像信息中。这样随着一幅图像的建立（这里说的是CGI），其Alpha通道也会随之产生或者存储。这样Alpha通道和图像信息一并存储和移动，有了RGBA的概念，数字合成变得更加轻松容易。当然为了提高合成效率。

RGB和RGBA的区别？

从字面上看是多一个A，A即Alpha的缩写，根据上RGB与Alpha的关系，可以简单的理解为可以在RGBA上设置透明度，可以设置的区间为【0，1】。

RGB 和HEX的区别与联系

what ? HEX是什么？

很多人写了很多年css也没懂HEX到底是什么？

Hexadecimal（十六进制），HEX是十六进制的简写

what?那为什么RGB的每个颜色的区间是【0，255】而HEX简写就只能是[00,FF]呢？

很简单，FF换算成10进制是什么？255！ 那么#号呢？ 个人认为可以理解为16进制的一种标识，就像RGB颜色设置的时候需要把每个色值写入到rgb()里面一样 从根本上说二者没有区别，都是对颜色的一种写法。

RGBA当中的A和opacity有什么区别呢？

个人理解，其实只要英语好一点，自己翻译下，就明白了。 opacity翻译为不透明度，Alpha可以理解为透明度。

那应该怎么使用Alpha和和opacity呢？

从效果上来看

上面是三个不同情况下的代码： 从上面看可以总结出以下几点：

RGBA 不会影响内部字体的颜色

其实不难理解，Alpha是通道的的透明度本质上是颜色的透明度，和元素没有任何的关系，和元素内部的字体更没有关系，所以内部字体不会受到影响，内部元素也不会受到影响

opactiy会影响内部字体颜色

不难理解，而且不仅是内部字体颜色，内部的元素都会都到这个影响，不透明度越大，整体的颜色越趋近于颜色本身，而不透明度越小越趋近于底色。

opacity叠加在css表现上类似继承

上图是文字叠加效果和透明度叠加效果 实际发现，字体的表现符合css本身的含义，即上层（子元素）会覆盖下层（父元素） 但是opacity是子元素和父元素透明度的叠加 其实也不难理解，如果透明度被覆盖了子元素为0.7，父元素为0.3时，如果此时表现为透明度为0.7不是很奇怪吗？ 个人猜测，设计透明度的属性的时候还是为了方便，来做出的这样的决定，但是暂无资料支持，有懂得大佬欢迎交流

HEX 和 RGB 互相转换的思路及实现

其实根本上的目的就是10进制和16进制之间的转换 理清了这个目的之后，剩下的就是机械的写代码了。

下面是 rgb to hex的转换代码

https://github.com/blackcloud2333/hex-rgb/blob/master/rgbTohex.js​github.com