好记性不如烂笔头。生活中多做笔记,不仅可以方便自己,还可以方便他人。
背景
开发的都知道,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就可以来这里看。如果上面有写错了,欢迎来“搞”!哈哈!
参考文章
本文参考了这位同学的文章
http://blog.csdn.net/jabony/article/details/52804296
网友评论