seegongsik
结构

怎么工作 十六进制颜色代码 是什么

给网站选颜色时,你可能见过这样的代码。里面夹着字母,看起来像密码,其实就是上一课的0和1换了身衣服。我们一层一层把它揭开。

01

四个0和1,缩成一个字符

上一课我们看到,所有东西都是用0和1写的。
可是只把0和1排成一长串,人眼看着太长,也容易看错。
于是人们把它们四个一组,缩成一个字符。
四个位能组成的情况,从0到15,正好十六种。

8
0
4
0
2
0
1
0
DEC
0
→
HEX
0

四个开关表示0到15这十六种,每种用一个字符写出来。

不过有个问题。
到了10、11、12这样的两位数,就分不清是一个字符还是两个字符了。
所以还需要再定一个巧妙的约定。

02

9的后面是A

我们用的数字只到9。
可是十六进制要用一个字符表示到十五,还差六个字符。
空缺就用字母来补。
9的后面是A,再后面是B,就这样一直到F。

0
0
1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
A
10
B
11
C
12
D
13
E
14
F
15

十个数字加六个字母,一个字符就能表示十六种。

也就是说,A是十,F是十五。
这不是什么可怕的密码,只是数字不够用,借来的字母。

03

屏幕上的颜色是三种光混出来的

接下来看看屏幕上的颜色。
屏幕上的每一种颜色,都是用红、绿、蓝三种光混合出来的。
每种光开得多亮,决定了最后的颜色。
拖动下面三个滑块,颜色马上就变。

#FAA832
rgb(250, 168, 50)
R250
G168
B50

三种光全关是黑色,全部开到最亮是白色。

每种光都能从0调到255,合起来能混出一千六百多万种颜色。
不过,和颜色一起出现的那串代码,是不是有点眼熟?

04

把#FAA832切成三段

颜色代码其实就是把红、绿、蓝三个值用十六进制写出来,再并排放在一起。
把六个字符两两切开,就得到三段。
前两个字符是红,中间两个是绿,最后两个是蓝。

#FAA832
FA16 × 15 + 10 =250R
A816 × 10 + 8 =168G
3216 × 3 + 2 =50B
#FAA832 = rgb(250, 168, 50)

两个字符一组来读。

前面说过,F是15,A是10。
所以FA就是16乘15再加10,也就是250。
照这个方法读,#FAA832就是红250、绿168、蓝50,混出来正是这种暖暖的黄色。

05

现在能读懂代码了

一旦熟悉了,只看代码也能大致猜出是什么颜色。
下面这些颜色就是例子。
红色那段数值大,颜色就偏红;三个值都大,颜色就亮。
它再也不是密码了。

#FF0000
rgb(255, 0, 0)
#00C800
rgb(0, 200, 0)
#3296FF
rgb(50, 150, 255)
#FAA832
rgb(250, 168, 50)
#FF64C8
rgb(255, 100, 200)
#FFFFFF
rgb(255, 255, 255)

三个值都大颜色就亮,只有一种大,那种颜色就更浓。

一句话总结夹着字母、像密码一样的颜色代码,其实记下的是三种光的亮度。而这些亮度,归根结底也是上一课的0和1。
← 结构
如果有帮助,请支持我们