摘要： 有时为了让页面小程序页面显示的字体和图标（icon）和顶部导航栏和底部导航栏的颜色相匹配，就需要设置为相同的颜色。

在微信小程序中，用来表示颜色的方法有3种：关键字、RGB、十六进制，其中： 关键字：‘red’, ‘orange’, ‘yellow’, ‘green’, ‘blue’, ‘purple’ RGB：‘rgb(255,0,0)’，‘rgb(0,255,0)’，‘rgb(0,0,255)’ 十六进制：‘#000000’，‘#ffffff’

（1）顶部导航栏的背景颜色：支持十六进制，如：

（2）底部导航栏的字体颜色：支持十六进制，如：

（3）wxml显示的text（字体）的颜色：支持关键字和RGB，不支持十六进制,如： .wxml文件：

.wass文件：

（4）wxml显示的icon（图标）的颜色：支持关键字和RGB，不支持十六进制，如： .wxml文件：

or

由于关键字的种类很少，很难满足我们想要的颜色；所以，我们通常用十六进制和RGB来表示，已达到我们想要的颜色。但是，不同组件之间，支持的颜色表示不一样，如顶部导航栏和图标，一个支持十六进制，另一个支持RGB；这时候，我们需要实现RGB和十六进制的转换，也是本文重点介绍的内容： 在这里，推荐一个颜色转换工具：十六进制与RGB颜色转换

（1）RGB颜色值转换成十六进制颜色码： 输入RGB颜色值，即可转换成十六进制颜色码，还有颜色显示

（2）十六进制颜色码转换成RGB颜色值： （3）有时候知道颜色，但不知道RGB颜色值，也不知道十六进制颜色码，这时候就要根据颜色来查表：