アルファ早見表

HEX 透明度早見表 - CSS 用アルファ値

不透明度のパーセントを 2 桁の HEX アルファ値と 8 桁 HEX カラーコードに変換。RGBA のプレビュー付きです。

カラー

不透明度	アルファ HEX	HEX8	RGBA
100%	`FF`	`#000000FF`	`rgba(0, 0, 0, 1)`
95%	`F2`	`#000000F2`	`rgba(0, 0, 0, 0.95)`
90%	`E6`	`#000000E6`	`rgba(0, 0, 0, 0.9)`
80%	`CC`	`#000000CC`	`rgba(0, 0, 0, 0.8)`
75%	`BF`	`#000000BF`	`rgba(0, 0, 0, 0.75)`
70%	`B3`	`#000000B3`	`rgba(0, 0, 0, 0.7)`
60%	`99`	`#00000099`	`rgba(0, 0, 0, 0.6)`
50%	`80`	`#00000080`	`rgba(0, 0, 0, 0.5)`
40%	`66`	`#00000066`	`rgba(0, 0, 0, 0.4)`
30%	`4D`	`#0000004D`	`rgba(0, 0, 0, 0.3)`
25%	`40`	`#00000040`	`rgba(0, 0, 0, 0.25)`
20%	`33`	`#00000033`	`rgba(0, 0, 0, 0.2)`
15%	`26`	`#00000026`	`rgba(0, 0, 0, 0.15)`
10%	`1A`	`#0000001A`	`rgba(0, 0, 0, 0.1)`
5%	`0D`	`#0000000D`	`rgba(0, 0, 0, 0.05)`
0%	`00`	`#00000000`	`rgba(0, 0, 0, 0)`

使い方

8 桁 HEX カラーの末尾 2 桁が必要なときの早見表です。ベースカラーを選び、よく使う不透明度を確認して、オーバーレイ、無効状態の UI、透明なトークン用に HEX8 や RGBA をコピーできます。

不透明度 50% の HEX アルファは？

50% は丸めると 80 になるので、約 50% の黒は #00000080 です。

25% が 40 になるのはなぜ？

アルファは 0〜255 のチャンネルです。255 の 25% は丸めて 64 で、16 進数では 40 になります。

HEX アルファは CSS の opacity と同じですか？

HEX アルファはひとつの色の値に属します。CSS の opacity プロパティは要素全体と子要素に影響します。

モダンブラウザで HEX アルファを使えますか？

はい。8 桁 HEX はモダンブラウザでサポートされていますが、多くのチームにとっては RGBA の方が読みやすいでしょう。