CSS颜色：十六进制色，rgb()和rgba()小技巧

晚上下班回来兴致冲冲得准备看看vue.js，结果发现根本看不懂，和当初一开始看js一样，真的是一脸懵逼，想起来翁恺老师的css入门课，虽然说css实习期间有了很大的提升而且也自学过一部分，但是觉得翁恺老师这里一定会讲一些细节，另外因为翁恺老师声音好听，讲得也有趣，所以就自然而然打开看了一节，不知不觉就get到了小技巧

css中 color ， background-color 可以通过三种方式来设置：十六进制色，rgb和rgba .

一、十六进制色

颜色依次为纯白：#ffffff;纯红：#ff0000;纯绿：#00ff00;纯蓝：#0000ff;

你可能会说，这有什么？我也知道。

但是你知道为什么#fffffff代表的纯白，#ff0000代表纯红吗？

翁恺老师告诉我了，#__ __ __ 这三个空白位置分别，代表red，green，blue要填写两位十六进制数。

所以#ff 00 00 ,red部分为最大值ff，其余为0，代表红色最纯，绿色蓝色不上色。

#fff ff ff ，有一些常识的小伙伴都知道，红绿蓝三种纯色混合，产生白色，此处亦然。

二、rgb(x，y，z)

这三个参数是从0~255的十进制数，和十六进制色表示原理基本一致，不再赘述

三、rgba(x，y，z，α)

这是今晚发现的最有趣的一个部分，x,y,z同上，α指的是α通道，可以理解成牛排的成熟程度，越成熟，假设牛排越熟颜色越纯，可以取0~1之间的浮点数，取1时代表100%得使用这个rgb颜色，和牛排一样，全熟；取0.2时，代表20%使用这个rgb颜色，类比二成熟的牛排，unbelievable...直观，上图

从上到下α依次为1，0.9，0.8，0.7，0.6，0.5，0.4，0.3，0.2，0.1

其实get到rgba的α这个参数，一方面可以做简单的渐变效果，但是更重要的是可以加速开发，在写一些小demo的时候，不用再在使用什么颜色上纠结。

分享完毕，收拾睡觉！

努力成为优秀的前端工程师！

作者：趁你还年轻233
链接：https://www.jianshu.com/p/b85ba49b15b8