背景

开发的都知道,UI微调都是令人头痛的,尤其是颜色的微调。

如果视觉稿直接给颜色值那倒没啥,可怕的是后面还有标了透明度,而且视觉还原后发现颜色太透明了,要你透明度再调调,这才烦人。我总不能记住100个透明度的值吧。

一次计算,无数次使用,这文章,稳了。

正文

Android中的颜色值一般格式是:#AARRGGBB。AA就是透明度值(这里我只聊透明度)。

1. 透明度的计算

透明度分为256个等级,即 0 - 2560就是透明,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就可以来这里看。如果上面有写错了,欢迎来“搞”!哈哈!