一文说懂#00ff00、0x00ff00、rgb(0, 255, 0)的关系

最近在学three.js，关于颜色的设置，比较困扰，索性学习了下。

首先我们来看两种设置颜色的方法：

• webgl、three.js中给物体设置一个颜色，使用color: 0x00ff00
• css中设置一个颜色，可以使用color: #00ff00 或 rgba(0, 255, 0, 1)

以上三种方法有什么区别呢？

• rgba(0, 255, 0, 1)很好理解，就是一个RGB的色彩值；
• #00ff00 ：css中经常使用，比较常见，是颜色的十六进制表示法，可以在浏览器调试工具等多个工具中，将 rgba(0, 255, 0, 1)转换为这种表示法；
• 比较难懂的0x00ff00，它也是颜色的十六进制表示法，与#00ff00的却别就是：把#00ff00前面的#，换成0x（这里是重点哦，重点！！！）。

所以，看懂了吗？遇到0x00ff00这种颜色的表示再不用纠结了，通过工具，获取到想要的颜色的#00ff00表示，再把#换成0x，在webgl、three.js中使用就可以了。

最后，关于色彩值的转换工具：

• 浏览器调试工具
• 菜鸟教程的工具RGB转16进制

有这两个就够了。大家学习愉快！