背景

开发的都知道,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