LoginSignup
2
2

More than 3 years have passed since last update.

透明度を含むカラーの定義の仕方

Posted at

よく忘れるので備忘録に

透明度のあるカラー定義の仕方

#AARRGGBB

AA: アルファチャンネル
RR: 赤の16進数
GG: 緑の16進数
BB: 青の16進数

アルファチャンネル部分の計算の仕方

ケース: 20%だけ透過したい

不透明度(opacity)を計算する

100 - 20 = 80(%) = 0.8(opacity)

アルファチャンネルの範囲に変換

アルファチャンネルの範囲は8bit(0-255)

255 × 0.8(opacity) = 204

値を16進数に変換

この10進数の値を16進数に変換します(RGBのそれぞれの値を16進数カラーコードに変換するのと同じ要領)

自分で計算するのはとても面倒なので適当にDecimal to Hexとでもググってgeneratorを見つけてみましょう
Decimal to Hexadecimal converter

もしくはGoogleに直接聞いても良さそうです
204 to hex

今回の例でいえば204(10進数) -> 0xCC(16進数)となります

そのため、

AA: アルファチャンネル

CCになります。あとはRGB各値についても16進数の値を入れればokですね

 付録 - アルファチャンネル早見表

とはいえ、たいてい使いたい 透明度/不透明度 なんて予め決まっていますので下記のような早見表を参照するのが早いと思います

100% — FF
95%  — F2
90%  — E6
85%  — D9
80%  — CC
75%  — BF
70%  — B3
65%  — A6
60%  — 99
55%  — 8C
50%  — 80
45%  — 73
40%  — 66
35%  — 59
30%  — 4D
25%  — 40
20%  — 33
15%  — 26
10%  — 1A
5%   — 0D
0%   — 00

マテリアルデザインで使われている値も含めてより細かい値を参照したい場合は
こちらが参考になるかと思います

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2