CSSカラー関数：rgb()、hsl()、oklch()の比較

CSSは、ほとんどの開発者が実現するより、色を書く方法をより多く持っています。ユビキタスな16進コードを超えて、少なくとも8つの異なるカラー関数があります。各関数は異なるモデル、異なる強み、そしてそれに到達する可能性のある異なる理由を持っています。正しいものを選択することは、単なる構文の環境設定ではありません。カラーがアクセシビリティを持つかどうか、アニメーション内で正しく補間するかどうか、視覚的に一貫性のあるプログラム的なカラースケールを生成できるかどうかを決定することができます。

このガイドは、すべての主要なCSSカラー関数、各々がいつ活躍するか、および2026年のブラウザサポートの状況をカバーしています。

rgb()およびrgba()

rgb()関数は、RGBカラーモデルの直接的なCSS表現です。赤、緑、青の各1つは0から255までの3つの数値です。

color: rgb(59, 130, 246);     /* 鮮やかなブルー */
color: rgb(255, 87, 51);      /* 温かいコーラルレッド */
color: rgb(0, 0, 0);          /* ブラック */
color: rgb(255, 255, 255);    /* ホワイト */

rgba()は、0(透明)から1(不透明)までの4番目の引数で、不透明度を追加するための歴史的な形式です。

color: rgba(59, 130, 246, 0.5);   /* 同じブルーが50%不透明度で */

モダンrgb()構文

CSS Color Level 4では(2023年以降、すべてのモダンブラウザで完全にサポートされている)、rgb()はアルファチャネルを直接受け入れるようにアップデートされ、rgba()は冗長になります。

/* これらは現在同等です */
color: rgba(59, 130, 246, 0.5);
color: rgb(59 130 246 / 0.5);

アルファ値の前のスラッシュ付きのスペース分離構文は、rgb()、hsl()、および他の関数で動作します。両方のフォームが機能します。既存のコードベースで両方を確認します。

rgb()を使用する場合

rgb()は以下の場合に最も有用です。 - 16進カラーから作業していて、生のチャネル値が見えている - CSS カスタムプロパティを介して個別のR、G、またはBチャネルをアニメーション化する必要がある - カラーをプログラム的に生成し、ソースデータが既にRGBにある

その弱点は、人間の直感がRGBにうまくマッピングされていないことです。rgb(107、142、35)を見て、オリーブグリーンが得られることを知っています。デザイン作業では、HSLまたはOKLCHがより直感的です。

hsl()およびhsla()

HSLは色相、彩度、明度を表します。これはキューブではなく円柱にカラーをマッピングし、設計者が実際にカラーについて考える方法にはるかに近いです。

• 色相 ：カラーホイール上の0度から360度までの度(0 =赤、120 =緑、240 =青)
• 彩度 ：0%(グレー、カラーなし)から100%(完全に鮮やか)
• 明度 ：0%(ブラック)から100%(ホワイト)、50%が「純粋な」カラーです

color: hsl(217, 91%, 60%);    /* 鮮やかなブルー */
color: hsl(9, 100%, 60%);     /* 温かいコーラルレッド */
color: hsl(80, 60%, 35%);     /* オリーブグリーン */
color: hsl(0, 0%, 50%);       /* 純粋な中程度のグレー */

hsla()はアルファチャネルを追加し、rgb() / rgba()パターンと同一です。

color: hsla(217, 91%, 60%, 0.5);  /* 50%不透明度のブルー */
color: hsl(217 91% 60% / 0.5);   /* 同じ、モダン構文を使用 */

hsl()がウェブ開発を変更した理由

hsl()がCSS 2.1(2011)に到着する前に、CSSのカラーの明度または彩度を変更することは、16進コードまたはRGB値に戻り、最初から再計算する必要がありました。hsl()では、カラーの一貫した変更を簡単に作成できます。

:root {
  --blue-h: 217;
  --blue-s: 91%;
}

.btn {
  background: hsl(var(--blue-h), var(--blue-s), 60%);    /* ベース */
}
.btn:hover {
  background: hsl(var(--blue-h), var(--blue-s), 50%);    /* ホバー時は暗い */
}
.btn:active {
  background: hsl(var(--blue-h), var(--blue-s), 40%);    /* さらに暗い */
}

hsl()の問題

その直感的な訴えにもかかわらず、HSLには根本的な欠陥があります：それは知覚的に均一ではありません。HSL内の等しい数値ステップは、人間の目に同じように異なるように見えるカラーを生成しません。

最も明白な症状は黄色です。純粋なHSL黄色(hsl(60, 100%, 50%))は、純粋なHSL青(hsl(240, 100%, 50%))よりもはるかに明るく、より強烈に見えます。両方が同じ彩度と明度の値を持っているにもかかわらず。これにより、異なる色合いが視覚的にバランスしているように感じるカラースケールを構築することが難しくなります。

この理由のため、モダンCSSカラーの作業は、ますますOKLCHに向かっています。

lab()およびlch()

CSS Color Level 4は、色科学者によって設計された色知覚的に均一なCIE L*a*b*カラースペースに基づいたlab()およびlch()を導入しました。等しい数値差は、カラーの知覚的な等しい違いに対応しています。

lab()

lab()は3つの軸を使用します。 - L ：0(ブラック)から100(ホワイト)までの明度 - a ：グリーンレッド軸上の位置(負 =グリーン、正 =赤) - b ：青黄色軸上の位置(負 =青、正 =黄色)

color: lab(53 -5 -60);    /* 鮮やかなブルー */
color: lab(55 60 40);     /* 温かい赤オレンジ */
color: lab(80 -15 20);    /* ソフトなオリーブ/ライム */

aおよびb軸は、色相度よりも直感的ではありませんが、lab()は手書きでは理解しにくくなっています。それは最もプログラム的に有用です。例えば、知覚的に均一なグラデーション、またはコントラスト比を計算するときです。

lch()

lch()は、明度、彩度(彩度に似た)、および色相を使用したLabの円筒形の再想像です。

color: lch(53 60 265);    /* 鮮やかなブルー(L=53、C=60、H=265°) */
color: lch(60 55 25);     /* 温かいオレンジレッド */

lch()の色相は、hsl()の色相に概ね(しかし同一ではなく)マッピングされます。重要な違いは、lch()の明度と彩度が知覚的に意味があることです。lch(70 40 X)では、彼らの色合いに関係なく、2つのカラーは同じように明るく見えます。これはhsl()では真実ではありません。

lab()およびlch()を使用する場合

これらの関数は以下に優れています。 - 知覚的なコントラストが予測可能な、アクセシビリティのあるカラーペアを生成する - カラーが同じに加重されているように感じるデータビジュアライゼーションパレットの構築 - 滑らかで自然に見えるグラデーションの作成

それらは、oklch()による最新の作業の大部分で廃止されており、より正確で、より良いツールのサポートがあります。

oklch()

OKLCHは、CSSカラー指定の最先端です。2020年にBjörnOttossonによって開発されたOklabカラースペースに基づいており、CIE Labを改善して、より良い知覚的均一性を実現しており、特にCIE Labが不十分に扱う青と紫の色合いです。

関数は、オプションアルファを含む3つの値をとります。

• L ：0(ブラック)から1(ホワイト)までの明度
• C ：彩度(カラー強度)、通常0から0.4
• H ：度の色相角、0から360

color: oklch(0.62 0.19 250);    /* 鮮やかなブルー */
color: oklch(0.65 0.22 25);     /* 温かい赤オレンジ */
color: oklch(0.85 0.08 130);    /* ソフトグリーン */
color: oklch(0.62 0.19 250 / 0.5); /* 50%不透明度のブルー */

oklch()が重要な理由

予測可能な明度。 OKLCHの明度は知覚的に均一であるため、同じL値の2つのカラーは、色相に関係なく等しく明るく見えます。これにより、すべての色合いが望ましいと思われるカラーパレットを簡単に構築できます。

/* これらはすべてOKLCHで等しく「中程度の重量」に見えます */
--red:    oklch(0.65 0.25 15);
--green:  oklch(0.65 0.18 145);
--blue:   oklch(0.65 0.19 250);
--yellow: oklch(0.65 0.15 90);

hsl()でそれを実現しようとしてください。黄色がブルーよりも明らかに明るく見えます。

広いガマットアクセス。 OKLCHはsRGBガマットの外側のカラーを表現でき、モダンディスプレイ(iPhone、MacBook Pro、ほとんどの2023年以降のラップトップ)で利用可能な鮮やかなカラーへのアクセスを提供できます。これはDisplay P3またはより広いサポート。16進コードとrgb()はsRGBに制限されています。

/* このビビッドグリーンはoklchでのみ可能です — sRGB外 */
color: oklch(0.72 0.30 145);

ブラウザは、それらを表示できないディスプレイの最も近いアクセス可能なカラーに、ガマット外のOKLCHカラーを自動的にマッピングするため、今度はワイドガマットカラーを使用しても安全です。

より優れたグラデーション補間。 OKLCHで補間される(アニメーション化または段階的な)カラーは、知覚的な中間カラーを通過します。補色の間のRGBグラデーションに表示される悪名高い「灰色の泥のような中間」はOKLCHでは発生しません。

デザインシステム内のoklch()

ますます多くのデザインシステムとCSSフレームワークがそのカラースケールのためにOKLCHを採用しています。2025年以降から最初からデザインシステムを構築している場合、OKLCHは推奨される開始点です。カラーコンバータを使用して、既存の16進コードをそのOKLCH同等物に翻訳します。

color-mix()

color-mix()は、指定されたカラースペースと比率で2つのカラーをブレンドするより新しいCSS関数です。

/* oklchで均等にブルーと赤をブレンド */
color: color-mix(in oklch, #3B82F6 50%, #EF4444 50%);

/* ティントを作成：ホワイトで混合 */
color: color-mix(in oklch, oklch(0.62 0.19 250) 60%, white);

/* シェードを作成：ブラックで混合 */
color: color-mix(in oklch, oklch(0.62 0.19 250) 70%, black);

in oklch(またはin srgb、in hslなど)ブレンド計算に使用されるカラースペースを指定します。これは結果に大きく影響します。

ミキシングのためにカラースペースが重要な理由

sRGBのブレンディングは、補色の間の暗い、彩度の低い中点を生じます。OKLCHのブレンディングは、知覚的に鮮やかな中間カラーを生じます — OKLCH補間が人間のカラー知覚と同じ道を追うため。

/* sRGBで青と黄色をブレンドすると、ユタッド/グレーオリーブが生じることが多い */
color: color-mix(in srgb, blue, yellow);

/* oklchでのブレンディングは、鮮やかなグリーン中間を生じます */
color: color-mix(in oklch, blue, yellow);

color-mix()の実践的な使用例

テーマバリアントを生成します。 ブランドカラーの5つのシェードバリアントをハードコーディングする代わりに、動的に生成します。

:root {
  --brand: oklch(0.55 0.22 250);
  --brand-light: color-mix(in oklch, var(--brand) 50%, white);
  --brand-lighter: color-mix(in oklch, var(--brand) 25%, white);
  --brand-dark: color-mix(in oklch, var(--brand) 80%, black);
}

ダークモード適応。 暗いベースとの混合により、暗いモードの表面カラーを自動的に導出します。

@media (prefers-color-scheme: dark) {
  --surface: color-mix(in oklch, var(--brand) 15%, #121212);
}

実際の透明度なし透明度。 カラーを白または特定の背景カラーとの混合は、合成レイヤーなしで不透明度をシミュレートします。

/* ホワイト背景でrgba(59、130、246、0.2)をシミュレート */
color: color-mix(in srgb, #3B82F6 20%, white);

2026年のブラウザサポート

2026年初頭の時点で、oklch()およびcolor-mix()はすべての主要なモダンブラウザ全体でサポートされています。主な関心事は、古いモバイルブラウザまたは廃止されたブラウザポリシーを持つエンタープライズ環境のユーザーです。最大の互換性が重要な本番作業では、モダン構文の前に16進またはrgb()フォールバックを提供します。

.element {
  /* 古いブラウザ用フォールバック */
  color: #3B82F6;
  /* 段階的な強化 */
  color: oklch(0.62 0.19 250);
}

正しいCSSカラー関数を選択する

主要なポイント

• rgb()およびhsl()は、ユニバーサルブラウザサポートを備えた確立された標準です。モダンなスペース分離構文(rgb(R G B / alpha))はrgba()およびhsla()を冗長にします。
• hsl()はデザイン作業ではrgb()よりも直感的ですが、知覚的に均一ではありません。等しい数値ステップは、特に色合い全体で、不平等な知覚的変更を生成します。
• lab()およびlch()はCSSに知覚的均一性をもたらしましたが、より正確なoklch()によって大幅に廃止されています。
• oklch()はモダンな標準です。知覚的に均一で、ワイドガマット対応で、グラデーション、アニメーション、デザインシステムのカラースケールに優れています。
• color-mix()は、CSSで直接動的なカラー生成を可能にします。テーマ、ティント、シェード、ダークモード適応に有用です。
• カラーコンバータを使用して、既存の16進コードをoklch()または任意の他のフォーマットに翻訳します。
• 最大のブラウザ互換性のために、oklch()またはcolor-mix()の前に16進またはrgb()値をフォールバックとして提供します。