顏色透明度計算

我們在開發過程中,經常遇到這樣一件事, 設計師給你一個顏色值,然後告訴你這個顏色值有30%的透明度。大多數人會問30%的透明度是多少呢?怎麼計算這個30%的透明度?

顏色值通常遵循RGB/ARGB標準,使用時通常以#字符開頭,以16進製表示
其中RGB依次代表紅色(Red)綠色(Green)藍色(Blue)
ARGB依次代表透明度(Alpha)、紅色(Red)綠色(Green)藍色(Blue) 

比如:給一個8位的顏色值“#FF00CC99”其中FF是透明度,00是紅色值,CC是綠色值,99是藍色值(也就是說前2位表示透明度,後面6位表示顏色值)

透明度的範圍又是多少呢?
衆所周知透明度的範圍是0-255,在計算機中,我們就用16進制(00-FF)表示,全透明就是00,完全不透明就是FF

30%的透明度與0-255又有什麼關係呢?

我們可以這麼理解:透明度和不透明度加起來等於1或者說100%

Alpha=255*30%; 再轉換成16進制就得到我們顏色前2位的透明度值

下面自己寫了一個paython腳本計算透明度值, 方便以後設計師再給我們說透明度百分之多少, 我們直接輸入一行命令就可以獲取到我們想要的透明讀值

#!/usr/bin/python
# -*- coding: UTF-8 -*-
# scott
# 透明度的範圍是0-255,在計算機中,我們就用16進制(00-FF)表示,全透明就是00,完全不透明就是FF
# 計算透明度
def calculationAlpha(index):
	#255 * 不透明度 -> 轉換成16進制數 eg:30%不透明度也就是255*30%=76.5,四捨五入77,然後利用計算器轉爲16進製爲4D
	temp = 255 * float(index)  / 100
	roundvalue=round(temp)
	result=hex(int(roundvalue))
	print index,"--->",result.upper()
	pass

while True:
	try:
		value=int(raw_input("請輸入透明度百分比(eg:透明度30%,輸入30即可,輸入0,將顯示全部):"))
		if (value > 100 or  value < 0):
			print "請輸入0到100的整數..."
			continue
	except ValueError:
		print "請輸入0到100的整數..."
		continue
	else:
		break

if value==0:
	print "顯示0到100的轉換"
	for count in range(0,101):
  		calculationAlpha(count)
else:
	calculationAlpha(value)




將以上內容拷貝到txt文件中,並重命名alphavalue.py,這個名字可以隨便取,後綴名必須是.py,才能表示這是python腳本。然後打開終端,cd到對應到目錄下(建議直接放在根目錄下,下次使用就不用去cd目錄)然後在終端中輸入:python alphavalue.py 執行腳本就會出現下面的效果。

運行效果如下:

從運行的結果中知道40%的透明度對應的十六進制是0X66,假設設計師說界面中某一下劃線的顏色是#FFFFFF並且透明度爲40% 那麼最後我們顏色值應該是“#66FFFFFF”,最後的效果就是設計師想要的顏色。

上面的python腳本, 如果你輸入0,這會把0到100%的透明度都轉換出來

請輸入透明度百分比(eg:透明度30%,輸入30即可,輸入0,將顯示全部):0
顯示0到100的轉換
0 ---> 0X00
1 ---> 0X03
2 ---> 0X05
3 ---> 0X08
4 ---> 0X0A
5 ---> 0X0D
6 ---> 0X0F
7 ---> 0X12
8 ---> 0X14
9 ---> 0X17
10 ---> 0X1A
11 ---> 0X1C
12 ---> 0X1F
13 ---> 0X21
14 ---> 0X24
15 ---> 0X26
16 ---> 0X29
17 ---> 0X2B
18 ---> 0X2E
19 ---> 0X30
20 ---> 0X33
21 ---> 0X36
22 ---> 0X38
23 ---> 0X3B
24 ---> 0X3D
25 ---> 0X40
26 ---> 0X42
27 ---> 0X45
28 ---> 0X47
29 ---> 0X4A
30 ---> 0X4D
31 ---> 0X4F
32 ---> 0X52
33 ---> 0X54
34 ---> 0X57
35 ---> 0X59
36 ---> 0X5C
37 ---> 0X5E
38 ---> 0X61
39 ---> 0X63
40 ---> 0X66
41 ---> 0X69
42 ---> 0X6B
43 ---> 0X6E
44 ---> 0X70
45 ---> 0X73
46 ---> 0X75
47 ---> 0X78
48 ---> 0X7A
49 ---> 0X7D
50 ---> 0X80
51 ---> 0X82
52 ---> 0X85
53 ---> 0X87
54 ---> 0X8A
55 ---> 0X8C
56 ---> 0X8F
57 ---> 0X91
58 ---> 0X94
59 ---> 0X96
60 ---> 0X99
61 ---> 0X9C
62 ---> 0X9E
63 ---> 0XA1
64 ---> 0XA3
65 ---> 0XA6
66 ---> 0XA8
67 ---> 0XAB
68 ---> 0XAD
69 ---> 0XB0
70 ---> 0XB3
71 ---> 0XB5
72 ---> 0XB8
73 ---> 0XBA
74 ---> 0XBD
75 ---> 0XBF
76 ---> 0XC2
77 ---> 0XC4
78 ---> 0XC7
79 ---> 0XC9
80 ---> 0XCC
81 ---> 0XCF
82 ---> 0XD1
83 ---> 0XD4
84 ---> 0XD6
85 ---> 0XD9
86 ---> 0XDB
87 ---> 0XDE
88 ---> 0XE0
89 ---> 0XE3
90 ---> 0XE6
91 ---> 0XE8
92 ---> 0XEB
93 ---> 0XED
94 ---> 0XF0
95 ---> 0XF2
96 ---> 0XF5
97 ---> 0XF7
98 ---> 0XFA
99 ---> 0XFC
100 ---> 0XFF

看完是不是感覺以後就方便很多,不用再去問設計師透明度30%應該寫多少。哈哈。

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章