CSSのRGBAと透明度の書き方（opacityとの決定的な違い・8桁HEX）

CSSでの半透明カラー指定（RGBA）、アルファチャンネル（Alpha）、8桁HEX（#RRGGBBAA）、および opacity プロパティとの使い分けガイドです。

1. オンライン RGBA ↔ HEX 相互変換ツール

RGBA（rgba(65, 105, 225, 0.8)）と 8桁HEX（#4169E1CC）を相互変換してプレビューできます。

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

HEX / HEX8

RGBA

2. 各チャンネルの指定数値範囲

チャンネル	意味	指定可能な値の範囲	例
R	Red (赤)	`0` (なし) 〜 `255` (最大)	`255`
G	Green (緑)	`0` (なし) 〜 `255` (最大)	`0`
B	Blue (青)	`0` (なし) 〜 `255` (最大)	`0`
A	Alpha (透明度)	`0.0` (完全透明) 〜 `1.0` (完全不透明)	`0.5` (50%半透明)

3. `rgba()` vs `opacity` の決定的な違い

初心者・実務で最も混同しやすいのが background-color: rgba(...) と opacity プロパティの挙動差です。

/* ❌ opacity を使用した場合 */
.card-opacity {
  background-color: #ff0000;
  opacity: 0.5; /* ★問題: カード内のテキストや画像まで全部薄く透けてしまう */
}

/* ✅ RGBA を使用した場合 */
.card-rgba {
  background-color: rgba(255, 0, 0, 0.5); /* ★背景色だけが半透明になり文字はくっきり表示 */
}

4. モダンCSSでの 2 つの最新記法

① 8桁 HEX コード (`#RRGGBBAA`)

HEXコードの末尾2桁に透明度の16進数（00 〜 FF）を追加する記法です。

/* #4169E1 (RoyalBlue) に 80% 透明度 (16進数で CC) を指定 */
.modal-overlay {
  background-color: #4169e1cc;
}

② モダン CSS Color Module Level 4 記法 (カンマなし)

最新のCSS仕様では、カンマを省き / で透明度を指定するシンプルな書き方が標準化されています。

.button-hover {
  background-color: rgb(65 105 225 / 50%); /* 50% 透明度の青 */
}

ツール一覧