よく使う RGBA 透明度一覧（モーダル・ホバー・影・ガラス風UI定番数値）
CSS rgba UIデザイン フロントエンド カラーコード
Web UI デザインおよび CSS 実装で頻出する黒・白・ブランドカラーの半透明（RGBA）数値一覧と用途別の使い分け早見表です。
1. オンライン RGBA ↔ HEX 変換・プレビューツール
数値スライダーでアルファ値を調整しながら、表示結果とカラーコード（RGBA / 8桁HEX）をプレビューできます。
🎨 この場でRGBAとHEXを相互変換する
2. 黒の半透明（rgba(0, 0, 0, Alpha)）定番数値早見表
| RGBA 指定 | 不透明度 | 対応 8桁HEX | Tailwind 記法 | 主な用途・使いどころ |
|---|---|---|---|---|
rgba(0, 0, 0, 0.04) | 4% | #0000000A | bg-black/5 | リスト行・テーブルのホバー（ごく薄い背景変化） |
rgba(0, 0, 0, 0.08) | 8% | #00000014 | bg-black/10 | ボタンのホバー状態、disabled風背景 |
rgba(0, 0, 0, 0.12) | 12% | #0000001F | bg-black/15 | カードの極小シャドウ、薄い枠線 (Border) |
rgba(0, 0, 0, 0.15) | 15% | #00000026 | bg-black/15 | ドロップダウンメニューの影、強いホバー強調 |
rgba(0, 0, 0, 0.4) | 40% | #00000066 | bg-black/40 | 背面が識別できるダイアログ・ツールチップの背景 |
rgba(0, 0, 0, 0.5) | 50% | #00000080 | bg-black/50 | モーダル・ライトボックス背面の絶対定番 |
rgba(0, 0, 0, 0.7) | 70% | #000000B3 | bg-black/70 | ヒーロー画像の上に白文字を載せるグラデーション帯 |
3. 白の半透明（rgba(255, 255, 255, Alpha)）定番数値早見表
| RGBA 指定 | 不透明度 | 対応 8桁HEX | Tailwind 記法 | 主な用途・使いどころ |
|---|---|---|---|---|
rgba(255, 255, 255, 0.15) | 15% | #FFFFFF26 | bg-white/15 | ダークモード時のカード境界線・ボタン背景 |
rgba(255, 255, 255, 0.6) | 60% | #FFFFFF99 | bg-white/60 | 写真の上に置く半透明テキストパネル |
rgba(255, 255, 255, 0.8) | 80% | #FFFFFFCC | bg-white/80 | すりガラス (Glassmorphism) カード・固定ヘッダー |
rgba(255, 255, 255, 0.95) | 95% | #FFFFFFF2 | bg-white/95 | ほぼ完全な白だが背面のスクロールをわずかに感じる背景 |
4. モーダル・すりガラスの CSS 実装サンプル
① モーダル背景（オーバーレイ）
.modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5); /* 黒50% */
}② すりガラス風固定ヘッダー (Glassmorphism)
.glass-header {
position: sticky;
top: 0;
background-color: rgba(255, 255, 255, 0.8); /* 白80% */
backdrop-filter: blur(12px); /* 背景のぼかし効果 */
}