背景
开发的都知道,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就可以来这里看。如果上面有写错了,欢迎来“搞”!哈哈!