rgba はもう古い？そろそろモダンCSSでアップデートする話 ― スラッシュ表記とOKLCH

はじめに

CSSの色指定は、この数年で大きく進化しました。

• rgba() / hsla() のような「透明度のための別関数」が不要になり、
• 透明度はどの色空間でも “スラッシュ表記” で統一され、
• sRGB に縛られていた色指定は LCH / OKLCH といった直感的な色空間へ広がりました。

とはいえ、つい昔ながらの指定方法を使ってしまうケースも少なくありません。

モダンCSSの色指定で押さえるポイントは２つ

（1） 透明度（α：アルファ値）は “スラッシュ表記” に統一して書ける

rgb(255 0 0 / 0.5); /* 透明度 50% */

（2） 最も扱いやすく直感的な色空間は OKLCH（と LCH）

oklch(75% 0.12 30); /* OKLCH(明るさ 彩度 色相) で直感的な色指定 */

この2つを知っているだけで、
CSSの色指定は “古い記法” からアップデートできます。

まずは透明度のスラッシュ表記から見ていきましょう。

rgba() の時代は終わった ― 透明度は“スラッシュ表記”へ

モダンCSSでの透明度（α：アルファ値）は、
rgba() hsla() を使わずにスラッシュ / で書けます。

• 旧来の書き方（rgba）

「,」で区切る

rgba(255, 0, 0, 0.5); /* rgba(R, G, B, α); */

• モダンな書き方（スラッシュ表記）

スペース と「/」で区切る

rgb(255 0 0 / 0.5); /* rgb(R G B / α); */

違いは2点だけです。

• カンマ , を使わず スペース区切り にすること。
• 透明度をスラッシュ / で表記すること。

▼ なぜスラッシュ表記が良いのか？

• rgb() と rgba() の書き分けが不要
• 色空間ごとの書き方を統一できる（OKLCH と OKLCH でも同じ）

▼ RGB と 透明度（アルファ値）のルール

チャンネル	意味	範囲	例
R	Red（赤）	0 ~ 255	255
G	Green（緑）	0 ~ 255	0
B	Blue（青）	0 ~ 255	0

アルファ値	意味	範囲	例
α	不透明度	0 ~ 1（0 = 完全透明、1 = 完全不透明）	0.5

▼ スラッシュ表記では「透明度の省略」ができる

スラッシュ表記 は透明度を省略可能です。
透明度が不要な場合は スラッシュ / を省略します。

• アルファ値 : あり

rgb(255 0 0 / 0.5);

• アルファ値 : なし（＝ 不透明）

rgb(255 0 0);

CSSは スラッシュ / があるときだけ透明度の指定がある。と解釈するため、

• rgb(R G B) → 不透明
• rgb(R G B / α) → 透明度の指定あり

という明快なルールになります。
この仕様は、後で解説する LCH / OKLCH でもまったく同じ です。

CSSカスタムプロパティとの相性が非常によい

スラッシュ表記最大のメリットのひとつがこれ。

/* カスタムプロパティ（変数）の定義 */
:root {
  --brand-rgb: 120 80 220;   /* 色のRGB値（Red Green Blue）をまとめて指定 */
  --brand-alpha: 0.3;        /* 透明度（Alpha値） 0 = 透明, 1 = 不透明 */
}

/* ボタンの背景色を指定 */
.button {
  /* rgb()関数でカスタムプロパティを呼び出し、スラッシュ表記で透明度を指定 */
  background: rgb(var(--brand-rgb) / var(--brand-alpha));
  /* → 実際の色は rgb(120 80 220 / 0.3) と同じ */
}

rgba() 時代にはできなかった
「RGBはひとまとめ、透明度は別変数」
という設計が可能になります。

次に、色指定の最大の進化点である
直感的で扱いやすい色空間 LCH / OKLCH を見ていきましょう。

LCH / OKLCH とは？なぜ“直感的な色空間”なのか

▼ LCH / OKLCH の構造はシンプル

LCH 系の色空間は
L（明るさ）・C（彩度）・H（色相） の3つで色を表現します。

成分	意味	直感的にいうと
L	Lightness（明るさ）	どれだけ明るい色か
C	Chroma（彩度）	色の鮮やかさ
H	Hue（色相）	赤い・青い などの色味

RGB のように「255, 128, 40…」と数値だけ見ても分かりにくい、
という問題を解消してくれる構造になっています。

▼ OKLCH の基本的な書き方

oklch(75% 0.12 30);

この1行で、

• 75% = 明るさ（L）
• 0.12 = 彩度（C）
• 30 = 色相（H）

と、直感的なパラメータで色が書けます。

「明るくして」「彩度を少し落として」「色相を黄よりに」
といった操作がそのまま CSS の値になります。

▼ 透明度もスラッシュ表記で統一できる

OKLCH でも、透明度をスラッシュ / で書けます。

• アルファ値あり

oklch(75% 0.12 30 / 0.5);

• アルファ値なし（＝完全不透明）

oklch(75% 0.12 30);

RGB の時と同じルールで書けるため、
スラッシュ表記の一貫性がそのまま OKLCH にも効く のがポイントです。

▼ LCH / OKLCH の値の範囲まとめ

成分	意味	典型的な範囲	例
L	明るさ	0〜100%	75%
C	彩度	0〜0.4 程度（典型的な sRGB 内）	0.12
H	色相	0〜360deg	30

※ OKLCH の C は P3 を使うと 0.4 を超えることもあります。
※ H は単位省略でも OK（例：30 = 30deg）。

▼ なぜ “直感的” なのか？

理由は3つあります。

1. 数値の意味がそのまま色の性質を表す

• L を上げる → 明るくなる
• C を下げる → くすむ
• H を変える → 色相が変わる

Photoshop やカラーピッカーの操作感と一致します。

2. デザイナーが考える“色の調整”と合致している

「もう少し明るく」「彩度だけ下げたい」など、
デザインの言語にそのまま対応しています。

3. 人間の見え方に基づいた“知覚的均等性”がある（特にOKLCH）

OKLCH は “人の目がどう色を感じるか” を基準に作られており、

• 彩度を一定量上げる → 見た目の変化も一定
• 明るさを変えても色相がズレない
• 同じ距離だけ値を動かすと、同じくらい見た目が変わる

という特徴があります。

Web でものすごく扱いやすい理由がここにあります。

▼ なぜ OKLCH がいま最有力なのか？

LCH と OKLCH は似ていますが、
Web では圧倒的に OKLCH のほうが扱いやすい です。

その理由は：

• 暗い領域～明るい領域まで色の破綻が少ない
• 低彩度で色相が大きくズレにくい
• UI のテーマカラー（ライト/ダーク）に向いている
• アクセシビリティ（コントラスト設計）がやりやすい
• sRGB を超える色域（P3など）も扱える

つまり “Web/UI の色調整に扱いやすく最適化された LCH” と言えます。

OKLCH を使うときのフォールバックとデザイントークン

▼ 最小限のフォールバック

.button {
  color: #3b82f6;             /* 旧環境向け */
  color: oklch(70% 0.15 250); /* モダンCSS */
}

下に書かれたプロパティを優先するCSSの特性を使うだけで、
追加の仕組みは必要ありません。

▼ デザイントークンとの連携

デザイントークンとは、色・フォント・間隔などデザインの値を変数として定義し、再利用・一括管理できる仕組みです。

デザインシステムを運用する場合、
OKLCH をそのまま トークンの値 として扱うのが最もシンプルです。

/* ルート（全体）でデザイントークンを定義 */
:root {
  /* モダンCSSでのブランドカラー（OKLCH） */
  --brand-blue: oklch(70% 0.15 250);
  /* 古いブラウザ向けのフォールバック（sRGBカラー） */
  --brand-blue-fallback: #3b82f6;
}

/* ボタンの文字色設定 */
.button {
  /* 旧ブラウザ向け：フォールバックカラーを先に指定 */
  color: var(--brand-blue-fallback);
  /* モダンブラウザ向け：OKLCHのトークンを指定 */
  color: var(--brand-blue);
}

OKLCH は「明るさ（L）」「鮮やかさ（C）」「色相（H）」が独立しているので、
ブランドカラーの体系化 や ライト／ダークテーマ展開 がとても楽になります。

付録：色空間（Color Space）と CSS の色指定の関係

ここで「色空間とは何か？」「記法とはどう違うか？」を簡潔に整理しておきます。

※ 色空間の理解は必須ではありませんが、
sRGB → LCH → OKLCH の進化を“一枚の地図”としてつかみたい方は読んでみてください。

CSS の色指定は、
色空間（どの世界の色を使うか） × 記法（どの方法で書くか）
の組み合わせで成立しています。

▼ 色空間と CSS 記法の対応表

色空間（Color Space）	主な CSS 記法	解説
sRGB（標準）	#RRGGBB / rgb() / hsl()	Web の標準色空間。これらの記法はすべて sRGB の色域内 で色を扱う。
OKLab / OKLCH（知覚系）	oklab() / oklch()	人間の知覚に近い Lab 系。**明るさ（L）**が直感的に扱えるため調整がしやすい。
Display-P3（広色域）	color(display-p3 …)	sRGB を超える 広い色域 を扱える。最近のデバイスで急速に普及。

▼ 色空間と記法の違い

● 色空間（Color Space）
扱える色の範囲（色域）や、色の見え方、混ぜ方、グラデーションの変化などを定義する“色の世界”。

● 記法（Notation）
その色空間の色を “どう書くか” を定義する仕組み。
例：16進数で書くか、関数形式で書くか、アルファを含めるかなど。

▼ 記法が変わると何が変わる？

1. 扱える色の範囲（色域）が変わる

• rgb()（sRGB）より
• color(display-p3 …)（Display-P3）の方が

鮮やかな色・広い色域 を表現できる。

2. 色の変化のしかたが変わる（補間の自然さ）

• rgb() ：機械的な数値の平均 → 急に濁る・暗くなる
• oklch()：知覚的な明るさを保ったまま変化 → 滑らか

OKLCH の方が、人間の知覚に沿った自然な補間になる。
（明るさ L が保たれ、急に濁ったり暗くなったりしない）

▼ 補足：HSL と sRGB の関係

hsl() は「人が扱いやすいようにした色調整記法」であり、色空間としては sRGB の中で動いています。

扱いやすい
けれど色域は広がらない（sRGB のまま）
という “便利だけど古典的” な位置づけです。

まとめ

• rgba() の時代は終わりつつあり、モダンCSSでは「スラッシュ表記」で透明度を扱う。
• LCH / OKLCH を使い「色の明るさ・鮮やかさ・色相」で直感的に色指定できるようになった。
• 特に OKLCH は、自然なグラデーション・一貫したトーン調整など “デザイン品質” を底上げできる。
• モダンブラウザではすでに十分実用的で、フォールバックも極めてシンプル。
• デザイントークンやテーマ管理との相性も良く、2025年以降のスタンダードな色指定として定着していく。