深耕设计多年的我们，平日里各种玩转 Sketch，吊打 Principle，逐浪 C4D，早已熟知RGB、CMYK 和 HSB / HSV / HSL 等不同的色彩模式，但你想过我们提交给开发爸爸们的色值是怎么计算出来的吗？在计算机领域，开发色值是一种基于 RGB 色彩模式的十六进制颜色编码。我们知道屏幕上看到的任何颜色都是由红、绿、蓝三种最基本的色光叠加形成的，这三种颜色参数的取值范围都是 0~255 。因此 RGB 色彩模式也是所有传统色彩模式里色域空间最为丰富的。

它包含了 255 × 255 × 255 ＝ 16,581,375 种颜色(与此对应，HSB / HSV / HSL 色彩模式只包含了 360 × 100 × 100 ＝ 3,600,000 种颜色)，而这 1600 多万种颜色在计算机语言里就以 # + 6 位代码存在，因此这 6 位代码与 RGB 色号有严格的对应关系。6 位代码两两分为 3 组，这 3 组编码分别对应了 RGB 三个参数。此处要注意的是，代码数制是十六进制，而我们平时用的数字是十进制，因此想要把开发色值转译为RGB 色号，只需要把这 3 组两位数编码转换成十进制数字就好了！怎么转呢？下方高能。先讲一个概念，位权。位权是数制中每一个固定位置数码所对应的数值。比如在十进制下，第2位(从右往左数)的位权为 10 ，第 3 位的位权为 100 ，总之第 a 位的位权就等于 10 的 a - 1 次方。什么意思呢？拿最近比较火的 325 举个例子，左边 3(第3位)的位权怎么计算呢？它 ＝ 10^3-1 ＝ 100中间2(第2位)的位权 ＝ 10^2-1 ＝ 10右边5(第1位)的位权 ＝ 10^1-1 ＝ 1(除 0 以外任何数的零次方都为 1 )因此对于 N 进制数，整数部分第 x 位的位权为 N ^ x - 1，理解了这个基础概念，我们就能计算不同进制下的数值啦！还拿 325 来举例。上面的公式只帮我们算出了位权，而这组数码代表的数值还要将位权乘以对应位置的基数，基数是什么呢？就是 3、2、5。所以 325 这组数码的数值＝ 3×10^3-1+2×10^2-1+5×10^1-1＝ 300+20+5 ＝ 325感觉好牛逼啊！325 ＝ 325，好像讲了一通废话呢！那是因为我们这是在计算十进制，而325本来就是我们熟知的十进制结果。如果现在告诉你325是一组十六进制代码呢？它在十进制下等于多少？简单，代入上面公式。它的十六进制数值＝ 3×16^3-1+2×16^2-1+5×16^1-1＝ 768+32+5＝805神奇吧！理解到这一步，来详细说一下十六进制。十六进制一个周期的数码符号有16个，表示为0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。其中A代表10，B代表11，C代表12，D代表13，E代表14，F代表15。这也就是我们平时为什么在开发色值代码里看不到什么K啊、S啊、W这些F以后的字母。上面的325因为没有涉及到大于9的数码，所以没有出现字母。我们找一个带字母的真实案例来看看。支付宝logo换色以后的蓝色开发色值为#1778FF(截屏取色，非官方)，先把它拆成对应RGB的编码17、78、FF，代入上面公式算出它们在十进制下等值的色号。R值(10)＝1×16^2-1+7×16^1-1＝16+7＝23G值(10)＝7×16^2-1+8×16^1-1＝112+8＝120B值(10)＝15×16^2-1+15×16^1-1＝240+15＝255在色板里切换到RGB模式验证一下，完全一致。很简单有没有！感觉自己通透了有没有！以后跟开发爸爸们说话可以抬起头了有没有！口算基础好的同学，看到一组开发色值就能在心理默算出对应的RGB色号，再根据色彩基础知识，就大概能判断出这是一个偏红or偏绿or偏蓝、偏亮or偏暗的颜色。这个冷知识对你的工作并没有直接的指导意义，但它能使我们成为有趣的人。See？艺术和科学，从来不矛盾。最后留一点小作业，假设 B612 是一组十六进制数码，它在十进制下等于多少呢？

| 往期相关：拟态化设计是下一个设计趋势吗

| 往期相关：设计师要关注的局部数据指标

| 往期相关：设计师要关注的局部数据指标