深耕设计多年的我们，平日里各种玩转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＝23

G值(10)

＝7×16^ 2-1+8×16^ 1-1＝112+8＝120

B值(10)

＝15×16^2-1+15×16^1-1＝240+15＝255

在色板里切换到RGB模式验证一下，完全一致。 很简单有没有！感觉自己通透了有没有！ 以后跟开发爸爸们说话可以抬起头了有没有！

口算基础好的同学，看到一组开发色值就能在心理默算出对应的RGB色号，再根据色彩基础知识，就大概能判断出这是一个偏红or偏绿or偏蓝、偏亮or偏暗的颜色。

这个冷知识对你的工作并没有直接的指导意义，但它能使我们成为有趣的人。

See？艺术和科学，从来不矛盾。

最后留一点小作业，假设B612是一组十六进制数码，它在十进制下等于多少呢？有答案了别忘在评论区留言哦！

Powered by Froala Editor