好记性不如烂笔头。生活中多做笔记,不仅可以方便自己,还可以方便他人。
背景
开发的都知道,UI微调都是令人头痛的,尤其是颜色的微调。
如果视觉稿直接给颜色值那倒没啥,可怕的是后面还有标了透明度,而且视觉还原后发现颜色太透明了,要你透明度再调调,这才烦人。我总不能记住100个透明度的值吧。
一次计算,无数次使用,这文章,稳了。
正文
Android中的颜色值一般格式是:#AARRGGBB。AA就是透明度值(这里我只聊透明度)。
1. 透明度的计算
透明度分为256个等级,即 0 - 256,0就是透明,255就是不透明
透明度 (透明)0 --> 255(不透明) 对应着16进制 (透明)00 --> FF(不透明)
比如:50%透明度
50%也就是256的一半即128,因为是从0开始算的,所以是 127,转换成16进制就是 7F
2.献上透明度表格
注意:我这里写的是透明度值,不是不透明度值,这是两个不同的概念,注意区分。
需要不透明度值的,可以自己算:透明度值 + 不透明度值 = 100%
如果你的UI设计师给的视觉稿标注是:颜色#FFFFFF,透明度40% 。那你的计算方式应该是:
将透明度转换成不透明度。不透明度为:60%
不透明度乘以255。 我们得到结果:153
将计算结果转换成16进制。得到最终的不透明度:99
将不透明度和颜色值拼接成ARGB格式。得到最终的颜色值: #99FFFFFF
所以,你的UI设计师要的颜色是:#99FFFFFF
下面是我表格里的透明度值的计算方式是:(A:透明度; H:16进制)
255*(100% - A%) 通过计算器转为16进制 H
(ps:因为计算结果取整数,所以可能会有一个进制位的误差,比如50%的透明度值,上面“1.透明度的计算”中的计算是127,16进制为7F,这里计算是127.5,四舍五入为128,16进制为80。所以,看到这里不用惊慌,7F跟80肉眼看起来是差不多的,不用去计较)
00是完全透明(百分百透明),FF就是完全不透明
透明度
16进制表
100 %
00
99 %
03
98 %
05
97 %
07
96 %
0A
95 %
0D
94 %
0F
93 %
12
92 %
14
91 %
17
90 %
1A
89 %
1C
88 %
1E
87 %
21
86 %
24
85 %
26
84 %
29
83 %
2B
82 %
2E
81 %
30
80 %
33
79 %
36
78 %
38
77 %
3B
76 %
3D
75 %
40
74 %
42
73 %
45
72 %
47
71 %
4A
70 %
4D
69 %
4F
68 %
52
67 %
54
66 %
57
65 %
59
64 %
5C
63 %
5E
62 %
61
61 %
63
60 %
66
59 %
69
58 %
6B
57 %
6E
56 %
70
55 %
73
54 %
75
53 %
78
52 %
7A
51 %
7D
50 %
80
49 %
82
48 %
85
47 %
87
46 %
8A
45 %
8C
44 %
8F
43 %
91
42 %
94
41 %
96
40 %
99
39 %
9C
38 %
9E
37 %
A1
36 %
A3
35 %
A6
34 %
A8
33 %
AB
32 %
AD
31 %
B0
30 %
B3
29 %
B5
28 %
B8
27 %
BA
26 %
BD
25 %
BF
24 %
C2
23 %
C4
22 %
C7
21 %
C9
20 %
CC
19 %
CF
18 %
D1
17 %
D4
16 %
D6
15 %
D9
14 %
DB
13 %
DE
12 %
E0
11 %
E3
10 %
E6
9 %
E8
8 %
EB
7 %
ED
6 %
F0
5 %
F2
4 %
F5
3 %
F7
2 %
FA
1 %
FC
0 %
FF
结尾
东西虽然简单,但还是写出来,就当工具用,下次调UI就可以来这里看。如果上面有写错了,欢迎来“搞”!哈哈!
参考文章