rgba(0,0,0,0.1)は何%透明ですか？

黒を不透明度10%（透明度90%）で重ねた色です。ごく薄い影や区切り線の代わりに使われます。

rgba(0,0,0,0.15)と0.1の違いは？

0.15の方がやや濃いオーバーレイになります。Material Designのelevationや、ホバー時の背景などで0.1〜0.15がよく使われます。

白半透明はどう書く？

rgba(255, 255, 255, 0.8) や rgb(255 255 255 / 0.8) が定番。ガラス風パネルやカード背景に使います。

透明度を%で考えるコツは？

A=0.1→10%不透明、A=0.5→50%不透明。デザインカンプで「黒40%」とあれば rgba(0,0,0,0.4) です。

rgba(0,0,0,0.1)などよく使う透明度の値一覧｜CSSデザインの定番

結論

実務で繰り返し出てくるのは 黒の 0.1 / 0.15 / 0.4 / 0.5 と 白の 0.8〜0.95 あたり。覚えるより、この表をブックマークしてコピペする方が早いです。

GSCのデータでも rgba(0,0,0,0.1) や rgba(0, 0, 0, 0.15) がそこそこ検索されています。意味の解説は rgba値とはに任せて、ここではそのまま使える定番値に絞ります。

黒（rgba(0, 0, 0, A)）の定番

値	不透明度	よく使う場面
`rgba(0, 0, 0, 0.04)`	4%	ごく薄い区切り、disabled風の背景
`rgba(0, 0, 0, 0.08)`	8%	リストのホバー背景（ライトテーマ）
`rgba(0, 0, 0, 0.1)`	10%	カードの影の代わり、薄いオーバーレイ
`rgba(0, 0, 0, 0.15)`	15%	ドロップダウンの影、やや強いホバー
`rgba(0, 0, 0, 0.25)`	25%	スナックバー背面、ツールチップ背景
`rgba(0, 0, 0, 0.4)`	40%	モーダル背面（まだ背面が見える）
`rgba(0, 0, 0, 0.5)`	50%	モーダル・ライトボックスの定番
`rgba(0, 0, 0, 0.7)`	70%	画像の上に文字を載せるときの帯

/* モーダル背面の定番 */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* リスト行のホバー */
.list-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

白（rgba(255, 255, 255, A)）の定番

値	不透明度	よく使う場面
`rgba(255, 255, 255, 0.6)`	60%	写真の上に載せる半透明パネル
`rgba(255, 255, 255, 0.8)`	80%	ガラス風カード、fixedヘッダー
`rgba(255, 255, 255, 0.9)`	90%	読みやすさ重視のオーバーレイ
`rgba(255, 255, 255, 0.95)`	95%	ほぼ白だが背面をわずかに透かす

backdrop-filter: blur() と組み合わせると glassmorphism っぽい見た目になります。白の rgba はそのベース色として使われることが多いです。

ブランド色を半透明にする

プライマリカラーが #3B82F6（青）のとき、RGBは 59, 130, 246 です。

/* 青10% — 選択行の背景 */
.selected {
  background: rgba(59, 130, 246, 0.1);
}

/* 青20% — フォーカスリングの代わり */
.focus-hint {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

HEXからRGBへの換算が面倒なときはツールに任せてください。

🎨 この場でRGBAとHEXを相互変換する

HEX / HEX8

RGBA

HEX8（#RRGGBBAA）との対応

CSSでは末尾2桁で透明度を付けた #0000001a のような 8桁HEX も使えます。

rgba	おおよその HEX8
`rgba(0,0,0,0.1)`	`#0000001a`
`rgba(0,0,0,0.15)`	`#00000026`
`rgba(0,0,0,0.5)`	`#00000080`
`rgba(255,255,255,0.8)`	`#ffffffcc`

Tailwind CSS では bg-black/10 のようにスラッシュ記法で同じことができます。Tailwind色一覧もあわせて参照してください。

選び方の目安

背面をまだ認識させたい → 黒 0.3〜0.4
操作をブロックしたい → 黒 0.5〜0.6
うっすら区切りたいだけ → 黒 0.04〜0.1
写真の上に文字 → 黒 0.5の帯、または白 0.9のパネル

「なんとなく 0.1」で始めて、デザインカンプと見比べながら 0.05 刻みで調整する、という進め方で十分です。

トピック	記事
rgbaの基礎	rgba値とは？CSSの色指定と透明度を図解
すりガラスUI	CSSですりガラス（glassmorphism）を作る方法

ツール一覧