十六进制色值的那些秘密

如题所述

文章来源于赏酒二两,作者lavon

深耕设计多年的我们,平日里各种玩转 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 是一组十六进制数码,它在十进制下等于多少呢?

本文首发于微信公号:青年老陈(长按可复制)。谈设计的现在与未来。

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

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

| 往期相关: 设计师要关注的局部数据指标
温馨提示:答案为网友推荐,仅供参考
相似回答