🎨
← ガイド一覧に戻る

モダンCSSカラー関数：rgba()、hsl()、oklch()、そしてその先へ

· タグ: css, color-functions, oklch, modern-css, web-development, rgba, hsl

モダンCSSカラー関数：rgba()、hsl()、oklch()、そしてその先へ

CSSカラー関数は劇的に進化しました。かつてはhex、rgb()、hsl()の間の選択だったものが、現在では色空間と操作関数の豊かなエコシステムになり、開発者に色の表現、補間、アクセシビリティに対する前例のない制御を与えています。

このガイドでは、なじみのあるものから最先端のものまで、2026年に利用できるすべての主要なCSSカラー関数を解説します。

RGBとRGBA：主力の関数

rgb() 関数は、赤-緑-青の加法混色モデルを使って色を定義します。CSS1からCSSの一部であり、これまでに作られたすべてのブラウザでサポートされています。

/* 従来のカンマ区切り構文 */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* モダンなスペース区切り構文（CSS Color Level 4） */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);

/* パーセント値 */
color: rgb(100% 0% 0%);

モダンRGBの主な変更点

CSS Color Level 4では、2つの重要な改善が導入されました：

  1. カンマ区切りからスペース区切りへ — rgb() 関数は現在、スペースまたはスラッシュで区切られた値を受け付けます
  2. 統合されたアルファ構文 — rgba() エイリアスは非推奨になりました（ただし、まだサポートされています）。rgb() は現在、ネイティブにアルファチャンネルを受け付けます

このモダン構文は、2020年以降にリリースされたすべてのブラウザでサポートされています。新しいプロジェクトでは、モダン構文を使用し、rgba() エイリアスは完全にスキップしてください。

RGBチャンネル

各RGBチャンネルは以下を受け付けます：

  • 0から255の整数
  • 0%から100%のパーセント
  • 欠落したチャンネルのための none キーワード（CSS Color Level 4）

none キーワードは色の補間時に便利です — 特定のチャンネルを補間しないようにブラウザに指示します。

HSLとHSLA：直感的な色の制御

HSLはHue（色相）、Saturation（彩度）、Lightness（明度）の略です。人間が色について考える方法に自然に対応する円柱座標系を使用します。

/* Hは色相角（0-360）、Sは彩度（0-100%）、Lは明度（0-100%） */
color: hsl(0 100% 50%);        /* 純粋な赤 */
color: hsl(0 100% 50% / 0.5);  /* 50%の不透明度の赤 */

/* 単位付きの色相角 */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

色相角のリファレンス

| 色相 | 色 | Hex | |-----|---------|----------| | 0 | 赤 | #FF0000 | | 30 | オレンジ | #FF8000 | | 60 | 黄 | #FFFF00 | | 120 | 緑 | #00FF00 | | 180 | シアン | #00FFFF | | 240 | 青 | #0000FF | | 300 | マゼンタ | #FF00FF |

HSLは、明度または彩度のチャンネルのみを変更することで一貫した視覚的バリエーションが作成できるため、プログラムでカラーパレットを生成するのに最適な選択肢です。

HWB：白と黒での混色

HWB（Hue、Whiteness、Blackness）は、HSLのより直感的な代替手段です。色相を選び、白さと黒さを追加してティントとシェードを作成します。

color: hwb(0 0% 0%);    /* 純粋な赤 */
color: hwb(0 40% 0%);   /* ティントされた赤（白を追加） */
color: hwb(0 0% 40%);   /* シェードされた赤（黒を追加） */
color: hwb(0 20% 20%);  /* トーン（白+黒） */

HWBは、ブランドカラーのティントとシェードのバリエーションを作成するという特定の用途ではHSLよりシンプルです。彩度カーブについて考える必要はなく、白または黒を追加するだけです。

ブラウザサポート： HWBはすべてのモダンブラウザでサポートされています（Chrome 101+、Firefox 96+、Safari 15+）。

LABとLCH：知覚的に均一な色空間

LAB（Lightness、A-axis、B-axis）とLCH（Lightness、Chroma、Hue）は、知覚的に均一な色空間です。つまり、2つの色の値の間のユークリッド距離が、知覚される視覚的な差に対応します — RGBとHSLにはできないことです。

color: lab(50% 50 0);        /* ミディアムレッド */
color: lch(50% 50 0);        /* 円筒形式の同じ色 */

知覚的均一性が重要な理由：

  • グラデーション — LABまたはLCHでの補間は、RGBグラデーションが作るくすんだ「濁ったゾーン」なしに、滑らかで自然な遷移を生み出します
  • 色差の測定 — Delta E（知覚的な差の尺度）はLAB空間で意味を持ちます
  • アクセシビリティ — 知覚的均一性は、色覚異常のあるユーザーが色をどのように知覚するかを予測するのに役立ちます

制限： LABとLCHはsRGB色域の外の色を生成することがあります。これらの色はsRGB画面で表示するとクリップされますが、より広い色域のディスプレイ（DCI-P3、Rec. 2020）ではアクセス可能です。

ブラウザサポート： Chrome 111+、Firefox 113+、Safari 15+でサポートされています。IEやレガシーEdgeのサポートはありません。

OKLABとOKLCH：モダンな知覚の標準

OKLCHは、Bjorn Ottossonによって開発されたLCHの改良版です。特に青の色相におけるLCHの知覚的な不均一性を修正します。OKLCHは2025〜2026年に新しいCSSプロジェクトの推奨デフォルト色空間になっています。

color: oklch(60% 0.2 30);
/* 明度：0-100%、クロマ：0-約0.4、色相：0-360 */

OKLCHがCSSに最適な色空間である理由

  1. 最高の知覚的均一性 — 等しい数値の変化が、すべての色相で等しい視覚的変化を生み出します
  2. 予測可能な明度 — 同じ明度の値の色は、実際に同じ明るさに見えます
  3. 濁ったグラデーションがない — 色相の全範囲にわたって補間がクリーンなまま
  4. デフォルトでsRGBセーフ — ほとんどのOKLCH値は色域内のsRGB色を生成します
  5. 直感的なチャンネル — HSLに似ていますが、実際の知覚精度を備えています

実践でのOKLCH

/* OKLCHでバランスの取れたカラースケールを作成 */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

各ステップがほぼ同じ明度の値（20パーセンテージポイント）ずつ変化していることに注目してください。OKLCHは知覚的に均一であるため、これらのステップは人間の目には等間隔に見えます — HSLでは実現が難しいことです。

ブラウザサポート： OKLCHはChrome 111+、Firefox 113+、Safari 15.4+でサポートされています。最も推奨されるモダン色空間として急速に普及しています。

Color-Mix：CSSでの色のブレンド

color-mix() 関数は、指定された色空間で2つの色をブレンドします：

/* sRGBで赤と青を等しく混ぜる */
color: color-mix(in srgb, red, blue);

/* プライマリ30%、白70% — ティント */
color: color-mix(in oklch, var(--primary) 30%, white);

/* 知覚的な色空間で混ぜて滑らかな結果を得る */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

in <color-space> パラメータで補間空間を制御できます。ほとんどの場合、in oklch が最良の視覚結果を生み出します。

ユースケース：

  • プリプロセッサ関数なしでティントとシェードを作成
  • 単一のカラートークンからコンポーネントのバリエーションを構築
  • ホバー状態とアクティブ状態を動的に生成
  • 単一の関数でグラデーション風の効果を作成

相対カラー構文：既存の色の変更

CSS Color Level 4では、個々のチャンネルを変更することで既存の色から新しい色を導き出すことができます：

--primary: #3366cc;

/* OKLCHチャンネルを使用 */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* HSLチャンネルを使用 */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

from <color> キーワードは、ソースカラーのチャンネルを宛先関数のチャンネルに展開し、算術演算で調整できます。

色空間ごとのチャンネルキーワード

各色空間は特定のチャンネルキーワードを公開します：

| 色空間 | キーワード | |-------------|----------------------------------| | rgb() | r、g、b、alpha | | hsl() | h、s、l、alpha | | hwb() | h、w、b、alpha | | lch() | l、c、h、alpha | | oklch() | l、c、h、alpha | | lab() | l、a、b、alpha | | oklab() | l、a、b、alpha |

ブラウザサポートの概要（2026）

| 関数 | Chrome | Firefox | Safari | Edge | |----------|--------|---------|--------|------| | rgb() / hsl() | All | All | All | All | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | 相対カラー構文 | 111+ | 113+ | 16.2+ | 111+ |

すべてのモダンカラー関数は、Internet Explorerのサポートを必要としないプロジェクトでは2026年に安全に使用できます。より広い互換性が必要な場合は、モダン構文をhexまたは従来の rgb() に変換するビルドステップを使用してください。

実践的な推奨事項

  • 既存プロジェクト向け — HSLは読みやすさと機能の最良のバランスであり続けます
  • 新規プロジェクト向け — 知覚精度のためにOKLCHを主要な色空間として使用
  • グラデーション向け — 濁った遷移を避けるため、常にOKLCHで補間
  • デザインシステム向け — ベースカラーをOKLCHで保存し、color-mix() または相対構文でバリエーションを生成
  • canvas/WebGL向け — レンダリングパイプラインにネイティブなRGBに固執

まとめ

モダンCSSカラー関数は、Webで色を使ってできることを変革しました。OKLCHは、カラーシステムの設計を予測可能にする知覚的均一性を提供します。color-mix() と相対カラー構文は、プリプロセッサのカラー関数の必要性を排除します。これらのツールを合わせることで、Web開発者にデザインツールが長年提供してきたのと同じ色のパワーを — 今やブラウザで直接 — 与えます。

当社の無料オンラインカラーコンバーターを使って、OKLCH、LAB、HWB、そして古典的なHEX/RGB/HSLを含むすべてのモダンCSSカラー形式間で変換してください。