web-dev-qa-db-ja.com

CSS 16進数RGBA？

私はあなたが書くことができることを知っています...

background-color: #ff0000;

...赤いものが必要な場合。

そして、あなたは書くことができます...

background-color: rgba(255, 0, 0, 0.5);

...赤く半透明なものが必要な場合。

部分的に透明な色を16進数で書く簡潔な方法はありますか？私のようなものが欲しい：

background-color: #ff000088; <--- the 88 is the alpha

...または...

background-color: #ff0000 50%;

私はすべての色を16進数で取得しているので、それらすべてを10進数の0-255スケールに変換するのは面倒です。

csscolorsrgba
164
Li Haoyi

CSSカラーモジュールレベル4は、おそらく4および8桁の16進数RGBA表記をサポートします！

3週間前（2014年12月18日）CSS Color Module Level 4 editor's draftがCSS W3Cワーキンググループに提出されました。変更の影響を非常に受けやすい状態ですが、ドキュメントの現在のバージョンでは、somewhat近い将来、CSSは4桁と8桁の16進数RGBA表記の両方をサポートすることを意味します。

注：次の引用には無関係なチャンクが含まれており、これを読むまでにソースが大幅に変更されている可能性があります（上記のように、それはエディターのドラフトであり、最終的な文書ではありません）。
状況が大きく変化した場合は、この回答を更新できるように、コメントを残してください。

§ ​​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桁は、それぞれ緑、青、およびアルファチャネルを表します。

これはCSSカラーの将来にとって何を意味するのでしょうか？

つまり、これがレベル4ドキュメントから完全に削除されていないと仮定すると、すぐにRGBAカラー（またはthoseみんな）Color Module Level 4の構文をサポートするブラウザの16進形式。

例

elem {
    background: rgb(0, 0, 0);           /* RGB notation (no alpha). */
    background: #000;                   /* 3-digit hexadecimal notation (no alpha). */
    background: #000000;                /* 6-digit hexadecimal notation (no alpha). */
    background: rgba(0, 0, 0, 1.0);     /* RGBA notation. */

    /* The new 4 and 8-digit hexadecimal notation. */
    background: #0000;                  /* 4-digit hexadecimal notation. */
    background: #00000000;              /* 8-digit hexadecimal notation. */
}

いつクライアント向け製品でこれを使用できるようになりますか？

Tumble weed is the only real response...

すべての冗談はさておき：それは現在2015年の始まりに過ぎないので、これらはまだしばらくの間どのブラウザでもサポートされません-あなたの製品が最新のブラウザでは、本番ブラウザですぐに動作することはおそらくないでしょう。

＃RRGGBBAAカラー表記の現在のブラウザサポートを表示

しかし、そうは言っても、CSSが機能する方法は、今日これらを実際に使い始めることができることを意味します！すぐにそれらの使用を開始したい場合、フォールバックを追加する限り、サポートされていないブラウザは有効と見なされるまで新しいプロパティを無視します。

figure {
  margin: 0;
  padding: 4px;
  
  /* Fall back (...to browsers which don't support alpha transparency). */
  background: #FEFE7F;
  color: #3F3FFE;
  
  /* Current 'modern' browser support. */
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  /* Fall... foward? */
  background: #ffff007F; /* Or, less accurately, #ff08 */
  color: #0000ffbe;      /* Or #00fc */
}
<figure>Hello, world!</figure>

CSSでbackgroundおよびcolorプロパティをサポートするブラウザーでこの回答を表示している限り、上記のスニペットの結果の<figure>要素は次のようになります。

Code Snippet Result Image

WindowsのChromeの最新バージョン（v39.0.2171）を使用して<figure>要素を検査すると、次のように表示されます。

Element Inspector Example

6桁の16進数のフォールバックはrgba()の値によってオーバーライドされ、8桁の16進数の値は現在ChromeのCSSパーサーによって無効と見なされるため無視されます。ブラウザがこれらの8桁の値をサポートするとすぐに、これらはrgba()の値をオーバーライドします。

UPDATE 2018-07-04：Firefox、ChromeおよびSafariは現在、この表記法をサポートしています。Edgeはまだありませんが、おそらく従います（ https://caniuse.com/#feat=css-rrggbbaa ）。

95
James Donnelly

質問の機能強化を投稿した後、答えを見つけました。ごめんなさい！

MS Excelが役に立ちました！

16進数の色の値に16進数のプレフィックスを追加して、％値と同等の不透明度を持つアルファを追加します。

（rbgaでは、不透明度のパーセンテージは上記のように小数で表されます）

Opacity %   255 Step        2 digit HEX prefix
0%          0.00            00
5%          12.75           0C
10%         25.50           19
15%         38.25           26
20%         51.00           33
25%         63.75           3F
30%         76.50           4C
35%         89.25           59
40%         102.00          66
45%         114.75          72
50%         127.50          7F
55%         140.25          8C
60%         153.00          99
65%         165.75          A5
70%         178.50          B2
75%         191.25          BF
80%         204.00          CC
85%         216.75          D8
90%         229.50          E5
95%         242.25          F2
100%        255.00          FF
19
T9b
RGB='#ffabcd';
A='0.5';
RGBA='('+parseInt(RGB.substring(1,3),16)+','+parseInt(RGB.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+A+')';
19
James Alarie

こちらをご覧ください http://www.w3.org/TR/css3-color/#rgba-color

これは不可能です。ほとんどの場合、0xFFFFFFFFが32ビット整数の最大値より大きいためです。

15
Griffin

Chrome 52以降 サポート アルファ16進数：

background: #56ff0077;
9
Oded Breiner

それは不可能だと思います。あなたが知っているrgba形式は唯一のものです。

6
Madara Uchiha

red、green、blueを使用してRGBAに変換します。

background-color: rgba(red($color), green($color), blue($color), 0.2);
6
Jeremy Lynch

LESSを使用できる場合、フェード機能があります。

@my-opaque-color: #a438ab;
@my-semitransparent-color: fade(@my-opaque-color, 50%);

background-color:linear-gradient(to right,@my-opaque-color, @my-semitransparent-color); 

// result: 
background-color: linear-gradient(to right, #a438ab, rgba(164, 56, 171, 0.5));
5
Julian Mann

チャーミングプリンス：

Internet ExplorerのみがARGB形式の4バイトの16進色を許可します。ここで、Aはアルファチャネルです。たとえば、勾配フィルターで使用できます。

filter  : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";

ここで、dirは1(horizontal)または0(vertical)です。また、色文字列は16進数の色（＃FFAAD3）またはargbの16進数の色（＃88FFAAD3）にすることができます。

2
Lajos Meszaros

まあ、異なる色の表記法はあなたが学ばなければならないものです。
Kuler は、複数の表記法で色を見つけるより良い機会を提供します。
HexはRGBと違いはありません。FF= 255および00 = 0ですが、それはあなたが知っていることです。ある意味で、それを視覚化する必要があります。
Hex、RGBA、RGBを使用しています。大量変換が必要でない限り、これを手動で行うと、奇数の100色とそのコードを覚えやすくなります。
大量変換のために、Alarieが指定したようなスクリプトを作成します。色で爆発します。

0
user900360

上記の答えを使用する必要がありました：

background-color: rgba(red($color), green($color), blue($color), 0.2);

しかし、OPがCSS + HEXを必要としていたので、少し追加したかったので、以下の答えは、前処理や追加のミックスインを必要とせずに16進値を使用する方法を示しています：

background-color: rgba(red(#4d238c), green(#4d238c), blue(#4d238c), 0.2);

これが役立つ理由は、選択した要素の背景色を不透明にしたいが、テキストはまだ強く見える場合です。

0
Sweet Chilly Philly