この記事の要点

rgb() は赤(R) / 緑(G) / 青(B) の 3 値で色を指定する CSS 関数 rgba() はそこにアルファ値（不透明度 0-1）を加えた指定方法 値は0〜255 の整数または0%〜100% のパーセント CSS Color Module Level 4 からカンマなしの新構文（rgb(255 0 0 / 0.5)）も使える 16 進数表記 #RRGGBB や hsl() と完全に変換可能。透明度を加える用途で rgba() を使うことが多い

rgb() / rgba() とは

rgb() は CSS で色を指定する関数表記の 1 つで、R（赤）、G（緑）、B（青） の 3 つの光の三原色の強さを組み合わせて色を表現します。

rgba() は rgb() にさらにアルファ値（不透明度）を加えた指定方法で、透明・半透明の表現が可能です。

基本構文

/* 旧構文（カンマ区切り） */
color: rgb(255, 0, 0);              /* 赤 */
color: rgba(255, 0, 0, 0.5);        /* 半透明の赤 */

/* 新構文（CSS Color Module Level 4 / カンマなし） */
color: rgb(255 0 0);                /* 赤 */
color: rgb(255 0 0 / 0.5);          /* 半透明の赤 */
color: rgb(255 0 0 / 50%);          /* 同上（パーセント） */

指定できる値

引数	意味	範囲
R	赤の強さ	0〜255 / 0%〜100%
G	緑の強さ	0〜255 / 0%〜100%
B	青の強さ	0〜255 / 0%〜100%
A（アルファ）	不透明度	0〜1 / 0%〜100%

整数とパーセントは混在不可（同じ呼び出し内で揃える）。値が範囲外でも CSS パーサは自動的にクランプします。

代表的な色

/* 三原色 */
.red    { color: rgb(255,   0,   0); }
.green  { color: rgb(  0, 255,   0); }
.blue   { color: rgb(  0,   0, 255); }

/* 中間色 */
.yellow { color: rgb(255, 255,   0); }
.cyan   { color: rgb(  0, 255, 255); }
.magenta{ color: rgb(255,   0, 255); }

/* 無彩色 */
.white  { color: rgb(255, 255, 255); }
.black  { color: rgb(  0,   0,   0); }
.gray50 { color: rgb(128, 128, 128); }

/* 半透明 */
.shade  { background: rgba(0, 0, 0, 0.4); }

rgb() と rgba() の使い分け

シーン	関数
ベタ塗りの色を指定	rgb() で十分
背景の上に半透明レイヤーを重ねる	rgba()
影 / グロー効果（box-shadow / text-shadow）	rgba() で透明度付き
背景画像の上に文字を重ねる	rgba() の暗色で読みやすく
モーダルの背景（ディムレイヤー）	rgba(0,0,0,0.5) など

新構文（CSS Color Module Level 4）

2020 年以降、現代的なブラウザではカンマを省略してスペース区切りで書けます。アルファ値は / で区切ります。

/* 旧 */
.box1 { background: rgba(255, 0, 0, 0.5); }

/* 新（推奨） */
.box2 { background: rgb(255 0 0 / 0.5); }
.box3 { background: rgb(255 0 0 / 50%); }

/* rgb() のままアルファ付きで書ける */
.box4 { background: rgb(255 0 0 / 0.5); }  /* OK */

新構文では rgba() と書かなくても rgb() でアルファを指定できます。rgba() は互換のため残されているだけで、新規実装では rgb(... / a) の形式が推奨です。

パーセント表記

/* 0% = 0, 100% = 255 */
color: rgb(100%,   0%,   0%);   /* 赤 */
color: rgb( 50%,  50%,  50%);   /* グレー */

/* アルファもパーセントで */
background: rgb(0 0 0 / 25%);

16 進数（#RRGGBB）との変換

RGB 各値を 2 桁の 16 進数に変換すれば #RRGGBB 形式になります。設計ツールから貼り付ける際、両者を相互変換できると便利です。

色名	RGB	16 進
赤	rgb(255, 0, 0)	#FF0000
緑	rgb(0, 255, 0)	#00FF00
青	rgb(0, 0, 255)	#0000FF
白	rgb(255, 255, 255)	#FFFFFF
黒	rgb(0, 0, 0)	#000000
半透明黒	rgba(0,0,0,0.5)	#00000080

新仕様では #RRGGBBAA の 8 桁 16 進でアルファも書けるようになりました。

hsl() / lch() との違い

関数	パラメータ	特徴
rgb()	赤・緑・青	機械寄り。デザインツール出力でよく使う
hsl()	色相・彩度・明度	人間直感に近い。明るさ調整がしやすい
lch() / lab()	明度・彩度・色相（知覚均等）	知覚的に均等。新しいデザイントレンド
color()	任意の色空間	P3 や Rec.2020 など広色域対応

使い分けのコツ

• デザインカンプから取った色をそのまま使う → 16 進数 or rgb()
• 「同じ色相で少し明るく / 暗く」したい → hsl()
• 透明度を持たせたい → rgba() または rgb(... / a)
• 知覚的にきれいなグラデーション → lch()

JavaScript からの操作

// 取得（ブラウザは rgb() / rgba() 形式で返す）
const c = getComputedStyle(elem).color;
// "rgb(255, 0, 0)" もしくは "rgba(255, 0, 0, 0.5)"

// 設定
elem.style.color = "rgb(255 100 50 / 0.8)";
elem.style.backgroundColor = "rgba(0, 0, 0, 0.5)";

よくあるトラブル

症状	原因と対処
色が表示されない	値が範囲外 / 構文エラー（カンマと空白の混在）
古いブラウザで新構文が効かない	IE11 / 古い Edge では旧構文のみ対応。サポート対象に応じて選ぶ
背景が透けない	rgba(0,0,0,1) など A=1 で不透明。A は 0〜1 の小数
opacity と rgba の違い	opacity は要素全体（子要素も）を透過。rgba は色だけ透過

FAQ

Q: rgba と opacity、どちらを使うべき？
A: 背景色だけ透過したい → rgba()。要素全体（中の文字も含む）を透過したい → opacity。

Q: 色値を変数化したい
A: CSS カスタムプロパティと組み合わせて --brand: 255 0 0; と RGB 値だけ格納し、rgb(var(--brand) / 0.5) のように透明度だけ可変にする手法が便利。

Q: 4 桁 16 進（#RGB）と 8 桁（#RGBA）の対応は？
A: #F00 は #FF0000 と同じ。#F008 はアルファ 0x88（約 0.53）相当。

関連

• CSSで色を指定する方法 — 親カテゴリ
• hsl() / hsla() — 色相・彩度・明度
• 16 進数表記（#RRGGBB / #RRGGBBAA）
• opacity — 要素全体の透明度
• currentColor / カスタムプロパティ