web-dev-qa-db-ja.com

16進数の色：「透明」の数値表現

ユーザーが特定のサイト要素の色を選択できるWeb CMSを構築しています。すべての色の値を16進数に変換して、それ以上の書式設定の手間（ "rgb（x、y、z）"または名前付きの色）を回避したいと思います。そのための優れたJSライブラリを見つけました。

私がヘックスに入れない唯一のものは「透明」です。要素を透明として明示的に宣言するときにこれが必要です。私の経験では、値をまったく定義しないこととは異なる場合があります。

これを何らかの数値形式に変換できるかどうかを知っている人はいますか？ 16進数の値を受け入れるようにすべての処理インスタンスをセットアップする必要がありますかまたは "transparent"？他の方法は考えられません。

csscolorstransparencyrgb
34
Pekka 웃

透明度は、alphaコンポーネントとも呼ばれる色自体の外側のプロパティです。 RGBとしてコーディングすることはできません。

透明な背景が必要な場合、これを行うことができます：

background: transparent;

また、役に立つかどうかはわかりませんが、opacityプロパティを設定できます。

.half{
  opacity: 0.5;
  filter: alpha(opacity=50);
}

IEおよび他のすべての適切なブラウザで動作させるには、両方が必要です。

31
Seb

HEXA-#RRGGBBAA

透明化を行う比較的新しい方法があり、[〜＃〜] hexa [〜＃〜]（HEX + Alpha）と呼ばれます。 6桁ではなく8桁かかります。最後のペアはアルファです。したがって、ペアのパターンは＃RRGGBBAAです。 4桁の数字も使用できます：＃RGBA

今のところブラウザのサポートについてはわかりませんが、詳細についてはDRAFT Docsを確認してください。

§ ​​4.2。 RGB 16進表記：#RRGGBB

_<hex-color>_の構文は_<hash-token>_トークンであり、その値は3、4、6、または8桁の16進数で構成されます。つまり、16進数の色は、ハッシュ文字「＃」の後に、いくつかの数字_0-9_または文字_a-f_が続きます（文字の大文字小文字は関係ありません-_#00ff00_は_#00FF00_）と同じです。

8桁

最初の6桁は、6桁表記と同じように解釈されます。 16進数として解釈される数字の最後のペアは、色のアルファチャネルを指定します。_00_は完全に透明な色を表し、ffは完全に不透明な色を表します。

例3
つまり、_#0000ffcc_はrgba(0, 0, 100%, 80%)（わずかに透明な青）と同じ色を表します。

4桁

これは、8桁表記の短縮版で、3桁表記と同じように「拡張」されます。 16進数として解釈される最初の桁は、色の赤チャネルを指定します。_0_は最小値を表し、fは最大を表します。次の3桁は、それぞれ緑、青、およびアルファチャネルを表します。

ほとんどの場合、ChromeとFirefoxはこれをサポートし始めました： enter image description here

35
Jomar Sevillejo

アルファチャネルは色の透明度の値を定義するため、アルファ値が0である限り、どの色も100％透明です。通常、この4チャネルカラータイプはRGBAとして知られています。

CSSで次のようにRGBAを指定できます。

div {
    background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}

すべてのブラウザがRGBAをサポートしているわけではないことに注意してください。その場合、fallbackを指定できます。

div {
    background: rgb(200, 54, 54); /* fallback */
    background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}

ブラウザのサポートと回避策に関する詳細情報は、 こちら にあります。

31
fbrereto

次の変換テーブルを使用できます。 http://roselab.jhu.edu/~raj/MISC/hexdectxt.html

たとえば、60％の透明度が必要な場合は、3C（16進数に相当）を使用します。

これは、IEバックグラウンドグラデーション透明度：

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454)";

ここで、startColorstrおよびendColorstr：最初の2文字は透明度の16進数値で、残りの6文字は16進数の色です。

5
Idealmind

これには2つの一般的なアプローチがあります。特定の色を「透明」として予約します。その場合、その色を透明に見えない画像で使用できないか、「アルファ」と呼ばれる赤、緑、これは半透明/透明を示します。

2
qid