结构
颜色代码 #FAA832 是什么意思?
给网站选颜色的时候,你大概见过这样的代码吧。掺着字母,看着像暗号,可它其实就是上次学的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
现在代码能读懂了
一旦上手,
光看代码,
就能大概猜出是什么颜色。
看看下面这些色。
红那一位大,就偏红,
三个都大,就亮。
不再是暗号了。
三个都大就亮,只有一个大,那个颜色就浓。
一句话总结掺着字母、看着像暗号的颜色代码,其实只是把三种光的亮度记了下来。而那个亮度,说到底,也还是上次学的0和1。
← 结构