アルファチャネル付きの色の16進表現?


117

16進形式で色(アルファチャネルを含む)を表現する方法について、W3またはその他の注目すべき標準はありますか?

#RGBAですか、それとも#ARGBですか?


8
CSSカラーレベル4のソースで提供されます(4番目の箇条書きを参照)
–ŠimeVidas 2013

@ŠimeVidasもしあなたがそれを答えに入れていたら、私はあなたに賛成票を投じたでしょう。
Ciro Santilli郝海东冠状病六四事件法轮功

@cirosantilli担当者が必要なように見えますか?:-P
サイムVIDAS

1
@ŠimeVidas笑、共有したい場合は==)
Ciro Santilli郝海东冠状病六四事件法轮功

これに関する同様のCSS固有の質問があります:CSS 16進数RGBA?
James Donnelly

回答:


82

CSS 3では、仕様から引用するために、「RGBA値には16進表記はありません」(CSSレベル3仕様を参照)。代わりに、小数またはパーセンテージでrgba()関数表記を使用できます。たとえば、rgba(255、0、0、0.5)は50%透明な赤になります。RGBチャネルは0〜255または0%〜100%で、アルファは0〜1です。

CSS 4 *では、8桁の16進数カラーの7番目と8番目の文字、または4桁の16進数カラーの4番目の文字を使用してアルファチャネルを指定できます(CSSレベル4仕様 *を参照)

2019年5月の時点で、ユーザーの80%以上が#RGBA形式を理解することが期待できます。

  • Firefoxは、Firefox 49以降、この構文をサポートしています(Mozillaバグ567283)。
  • Safariは、Safari 10以降、この構文をサポートしています。
  • ChromeはChrome 62以降、この構文をサポートしています。以前のバージョンでは、実験的なWeb機能でこの構文を使用できるようにすることができました。Chromium Issue 618472およびWebkit bug 150853を参照してください。
  • Android P以降を対象とするAndroidアプリは、この構文を使用できます
  • Operaは、Opera 52(または実験的なWeb機能が有効な場合はOpera 39)でこの構文をサポートしています。
  • IE 11およびEdgeHTML 18(Edge 44)はこの構文をサポートしていません。EdgeのChromiumベースのバージョンは、この構文をサポートします。

最新のブラウザーサポート情報はCanIUse.com入手できます。

*技術的にはまだドラフト段階ですが、ブラウザのサポートを考慮すると、これは変更される可能性はほとんどありません。


2
現在のところ、Mozilla(Firefox 49)は#RRGGBBAAと#RGBAをサポートしているようです
Shiyaz

92

16進アルファ形式がないようです:http : //www.w3.org/TR/css3-color/

とにかく、SASSのようなCSSプリプロセッサを使用する場合は、hexをrgba:background:に渡すことができます。

rgba(#000, 0.5);

そして、プリプロセッサは16進コードをrgbに自動的に変換するだけです。


15

公式の基準があるかどうかはわかりませんが

RGBAはWeb Macromediaで見た表現で、他の人はARGBを使用しています

RGBAがより一般的な表現だと思います。

それが役立つ場合、これはCSS3のW3からのものです
http://www.w3.org/TR/css3-color/#rgba-color

編集(パトリック):上記のW3リンクからの引用

RGB値とは異なり、RGBA値には16進表記はありません。


2
また、アルファで色を指定するためのCSS関数はrgba()です
Amber

8
あなたが投稿したW3リンクから:RGB値とは異なり、RGBA値の16進表記はありません。
Patrick Klug、

2
#RGB、Aを見たことがある。変だ。
ジョシュア

:Androidのドローアブルの場合は、ARGBように見えるdeveloper.android.com/reference/android/graphics/drawable/...
デレクKurth

10

Chrome 52以降 16進数のアルファをサポートしています

background: #56ff0077;

古いブラウザでは、以下を使用する必要があります。

background-color: rgba(255, 220, 0, 0.3);

3
いいえ、そうではありません。実験的なWeb機能を有効にしない限り、Androidで問題が発生したためです。ブラウザサポートの詳細については、上記の私の回答を参照してください。
thelem

3

16進数の色をGIMPまたはフォトショップのカラーピッカーに入力してRGB値を取得し、次にアルファ値を使用してみることができます。例えば。赤は、#FF0000またはrgb(255,0,0).5のアルファ値の赤が必要な場合rgba(255,0,0,.5)

多分あなたが望んでいたものとは違うかもしれませんが、うまくいけば助けてくれます。


1
これは反対票が投じられましたが、少し厳しいようです。質問の答えにはなりませんが、なぜ知りたいのかはわかりません。CSSでRGBAカラーを使用したいだけなら、この答えは正しいです。
thelem
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.