web-dev-qa-db-ja.com

色の16進透明度

私は自分のアプリウィジェットにウィジェット透明度オプションを実装することに取り組んでいますが、16進数のカラー値を正しく設定するのに問題があります。 16進数の色の透明度についてはまったく新しいので、私は自分の質問に対する具体的な答えを見つけることができませんでしたが、少し探しました。

透明度を16進数で設定したいので、16進数のid "#33b5e5"とし、50%透明にしたいとしましょう。 80は50%なので、 "#8033b5e5"を使用します。

私はここで役に立つチャートを見つけました: http://www.dtp-aus.com/hexadeci.htm 。このデータで私はこれを思いつくことができた:

0% = #00
10% = #16
20% = #32
30% = #48
40% = #64
50% = #80
60% = #96
70% = #112
80% = #128
90% = #144

今私が16進数で100以上になると問題が現れ始めます。 16進数のカラーコードの長さは8シンボルだけです。例えば#11233b5e5(80%)がクラッシュします。

もっと高い数字を使用できるようにするにはどうすればよいですか。

1137
SweSnow

これは16進値に対するパーセンテージの正しい表です。例えば。白が50%の場合は、#80FFFFFFを使用します。

  • 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

ソース

3371
Ben Clayton

短い答え

あなたは https://play.golang.org/p/l1JaPYFzDkI でこの遊び場のコードと16進値に対するパーセンテージの完全な表とrunコードを見ることができます。

擬似コードでの簡単な説明

16進値に対する割合

  1. 10進数 =パーセンテージ* 255/100。例:10進数= 50 * 255/100 = 127.5
  2. 10進数を16進数に変換します。 ex:127.5(10進数)= 7 * 16 ^ 1 + 15 = 7F(16進数)

パーセンテージへの16進値

  1. 16進数の値を10進数に変換します。例:D6 = 13 * 16 ^ 1 + 6 = 214
  2. 割合=(10進数)* 100 /255。例:214 * 100/255 = 84%

10進数の変換に関するより多くの情報<=> 16進数

長い答え:あなたの頭の中で計算する方法

問題は 交差乗算 によって一般的に解決することができます。

パーセンテージ(0から100の範囲)と別の数字(0から255の範囲)があり、その後16進数に変換されます。

  • 100 <==> 255(16進数でFF)
  • 0 <==> 0(16進数で00)

1%の場合

  • 1 * 255/100 = 2.5
  • 切り捨てた場合、ヘキサの2,5は2です。

2%の場合

  • 2 * 255/100 = 5
  • ヘキサの5は5です。

ベストアンサーの表には、ステップごとのパーセンテージが5%です。

あなたの頭の中の間の数を計算する方法? 2.5の増分のため、最初に2を加え、次に3を加えます

  • 95% - F2 //開始
  • 96% - F4 // F2に2を加える
  • 97% - F7 // 3を追加。またはF2 + 5 = F7
  • 98% - F9 // 2を追加
  • 99% - FC //ヘキサで3. 9 + 3 = 12を追加する:C
  • 100% - FF // 2を追加

私はテーブルを渡すよりも解決策を見つける方法を教えることを好みます

男に魚をあげれば、あなたは一日彼に餌をやる。釣りをする人に教えると、あなたは一生の間彼を養う。

116
Raymond Chenon

色の16進表記は次のようになります。#AARRGGBB

  • A:アルファ
  • R:赤
  • G:グリーン
  • B:青

最初に 16進数 がどのように機能するのかを見てください。あなたはせいぜいFFを書くことができます。

33
erkangur

その図表はパーセントを示していません。 「#90」は「90%」ではありません。そのグラフは、16進数から10進数への変換を示しています。 16進数90(通常0x90として表される)は、10進数144と同等です。

16進数は16進数なので、各桁は0からFの間の値です。2バイトの16進値(色の透明度など)の最大値は、0xFF、つまり10進数で255です。したがって、100%は0xFFです。

21
Tanis.7x

私はAndroidアプリのためにこの小さなヘルパーメソッドを構築しました、役に立つかもしれません:

 /**
 * @param originalColor color, without alpha
 * @param alpha         from 0.0 to 1.0
 * @return
 */
public static String addAlpha(String originalColor, double alpha) {
    long alphaFixed = Math.round(alpha * 255);
    String alphaHex = Long.toHexString(alphaFixed);
    if (alphaHex.length() == 1) {
        alphaHex = "0" + alphaHex;
    }
    originalColor = originalColor.replace("#", "#" + alphaHex);


    return originalColor;
}
17
dwbrito

enter image description here

これは非常に遅い答えかもしれません..しかしこの図表はそれを殺します。

すべてのパーセント値は16進値にマップされます。

http://online.sfsu.edu/chrism/hexval.html

16
amalBit

google検索でこれを試してください(または ここをクリック

255 * .2 to hex

結果として0x33を生成します。

ただし、Googleは値を四捨五入しないため、1桁の乗数しか使用できません。例えば.85を使用したい場合は、最初に255 * .85の四捨五入値を取得してから、Google検索で(rounded-value here) to hexを入力する必要があります。

6
chjarder

これは昔からの質問ですが、似たようなことをしたときに私はそれに出会いました。

SASSを使うと、RGBAを16進数のARGBに変換するための非常に洗練された方法があります:ie-hex-str。私はこれをミックスインで使っています。

@mixin ie8-rgba ($r, $g, $b, $a){
    $rgba: rgba($r, $g, $b, $a);
    $ie8-rgba: ie-hex-str($rgba);
    .lt-ie9 &{
      background-color: transparent;
      filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#{$ie8-rgba}', endColorstr='#{$ie8-rgba}');
  }
}

.transparent{
    @include ie8-rgba(88,153,131,.8);
    background-color: rgba(88,153,131,.8);
}

出力:

.transparent {
  background-color: rgba(88, 153, 131, 0.8);
}
.lt-ie9 .transparent {
  background-color: transparent;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CC589983', endColorstr='#CC589983');
  zoom: 1;
}
2
fontophilic

これを計算するためにpythonを使って、例えば(python 3で書かれて)、50%の透明度:

hex(round(256*0.50))

:)

1
Geng Jiawen