RGBAとは？RGBとの違いと透明度の指定方法
RGBAとは、RGBの赤・緑・青に、透明度を表すAlpha（アルファ）を加えた色表現です。
はじめて読む方へ｜まず知っておきたい基本
この記事で出てくる基本用語を先に確認します。ここだけ押さえておけば、専門知識がなくても本文を読み進められます。
RGBはRed・Green・Blueの3つの光を組み合わせて色を表す方式です。一般的な8bit表現では各成分を0〜255で示します。
明度は、色の明るさ・暗さを表す属性です。白に近いほど高く、黒に近いほど低くなります。
RGBAとは、RGBの赤・緑・青に、透明度を表すAlpha（アルファ）を加えた色表現です。
記事テーマを視覚的に理解するための色見本です。概念に固定の公式色がない場合は教材表示として扱います。
#3F6682#DDB04F#70A477#C96567#7862A1たとえば従来のCSSでは、半透明の赤をrgba(255, 0, 0, 0.5)のように指定していました。
RGBAとは？
RGBAの4文字は次を表します。
- R：Red（赤）
- G：Green（緑）
- B：Blue（青）
- A：Alpha（透明度）
RGBの色はそのままに、Aの値で背景をどの程度透かすかを指定できます。
アルファ値0と1の違い
アルファ値は、数値なら0〜1、パーセントなら0%〜100%で指定できます。
0：完全に透明0.5：50%の不透明度1：完全に不透明
MDNは、アルファ値0を完全透明、1を完全不透明と説明しています。
RGBAとRGBの違い
従来は、rgb()はRGB3成分、rgba()はRGB＋Alphaという使い分けが一般的でした。
しかし現在のCSSでは、rgba()はrgb()の別名です。MDNも両者は同等で、現代CSSではrgb()を使うことを推奨しています。
たとえば半透明赤は、現代構文ではrgb(255 0 0 / 50%)と書けます。
古い書き方と現代の書き方
- 旧来：
rgba(255, 0, 0, 0.5) - 現代：
rgb(255 0 0 / 50%)
どちらも広く利用できますが、新しくCSSを書く場合はスペース区切り＋スラッシュの現代構文が分かりやすくなっています。
RGBAとopacityの違い
RGBAのアルファ値とCSSのopacityは似ていますが、影響範囲が違います。
- RGBA / alpha：その色だけを半透明にする
- opacity：要素全体と子要素を含めて透明にする
背景だけを透かし、文字は不透明のままにしたい場合は、背景色にアルファ値を使う方が適しています。
HEXでも透明度を指定できる
CSSでは8桁HEXを使って透明度を指定することもできます。たとえば#ff000080は、赤に約50%のアルファを加えた表現です。
HEX・RGB・HSLなどを確認したい場合は、カラーコード変換を使えます。
RGBAはどんな場面で使う？
- 半透明の背景
- オーバーレイ
- 影や枠線
- ホバー時の色変化
- モーダル背景
まとめ｜RGBAはRGBに透明度を加えた色表現
RGBAは、赤・緑・青のRGB値にAlphaを加え、透明度まで指定できる色表現です。
現在のCSSではrgba()はrgb()の別名となっており、rgb(255 0 0 / 50%)のような現代構文で透明度を表せます。
