CSS では、linear-gradient()やcolor-mix()を使ってグラデーションや色のブレンドができますが、どの色空間を指定するかによって、色の変化の仕方が大きく異なります。
この記事では、各色空間がグラデーションや混色にどのような影響を与えるのかを比較し、適切な色空間の選び方を解説します。
目次
RGBベースの色空間
sRGB (srgb)
標準的な色空間で、多くのデバイスやソフトウェアがこの色空間を前提に設計されています。CSS のグラデーションでは、指定がない場合はこの sRGB がデフォルトで使用されます。RGB 値を直線的に補完するため、補色同士を使ったグラデーションなどでは中間色がくすんでしまうことがあります。
background-image: linear-gradient(in srgb to right, blue, red);background-image: linear-gradient(in srgb to right, blue, yellow);background-image: linear-gradient(in srgb to right, black, white);sRGB リニア (srgb-linear)
ガンマ補正されていない sRGB 色空間です。光の強度に基づいて補完するため、sRGB よりも中間色が明るくなりやすい傾向があり、彩度を保ちやすいのが特徴ですが、知覚的に均一でなく直感的ではない中間色になることがあります。
background-image: linear-gradient(in srgb-linear to right, blue, red);background-image: linear-gradient(in srgb-linear to right, blue, yellow);background-image: linear-gradient(in srgb-linear to right, black, white);知覚に基づいた色空間
CIE Lab（lab）
人間の視覚に基づいた色空間です。色の知覚の均等性を考慮した設計になっており、明度の変化が均一なグラデーションが得られるのが特徴です。ただし、特定の色の組み合わせでは予期しない色経路をたどる場合があります。
background-image: linear-gradient(in lab to right, blue, red);background-image: linear-gradient(in lab to right, blue, yellow);background-image: linear-gradient(in lab to right, black, white);OKLab（oklab）
Lab 色空間を改良したもので、視覚的に色変化が滑らかなグラデーションが得られるのが特徴です。Lab の欠点である予期しない色経路をたどるという問題が発生しにくいようになっています。
background-image: linear-gradient(in oklab to right, blue, red);background-image: linear-gradient(in oklab to right, blue, yellow);background-image: linear-gradient(in oklab to right, black, white);LCH（lch）
Lab の円筒座標版です。明度の変化が自然で、明るさを保ったグラデーションが得られるのが特徴です。ただし、こちらも Lab と同様に、特定の色の組み合わせでは予期しない色経路をたどる場合があります。
background-image: linear-gradient(in lch to right, blue, red);background-image: linear-gradient(in lch to right, blue, yellow);background-image: linear-gradient(in lch to right, black, white);OKLCH（oklch）
LCH の改良版です。色変化が視覚的に均等で、滑らかなグラデーションを得ることができるのが特徴です。LCH の欠点である予期しない色経路をたどるという問題が発生しにくいようになっています。
background-image: linear-gradient(in oklch to right, blue, red);background-image: linear-gradient(in oklch to right, blue, yellow);background-image: linear-gradient(in oklch to right, black, white);HSL / HWB系の色空間
HSL（hsl）
色相（Hue）、彩度（Saturation）、輝度（Lightness）を用いて調整を行う色空間です。カラーパレットによく使用されます。色が急に変化するように見える場合もあるため、グラデーションには不向きなこともあります。
background-image: linear-gradient(in hsl to right, blue, red);background-image: linear-gradient(in hsl to right, blue, yellow);background-image: linear-gradient(in hsl to right, black, white);HWB（hwb）
HSL に似ていますが、彩度と輝度ではなく、黒さ（Blackness）と白さ（Whiteness）を用いて調整を行った色空間です。
background-image: linear-gradient(in hwb to right, blue, red);background-image: linear-gradient(in hwb to right, blue, yellow);background-image: linear-gradient(in hwb to right, black, white);XYZベースの色空間
XYZ ベースの色空間は、物理的な光の特性に基づいた色空間であり、絶対的な色の表現方法ですが、視覚的に色を感じ取るためには他の色空間との変換が必要です。
linear-gradient() や color-mix() の指定にXYZ ベースの色空間をそのまま使用するのは不向きですが、CSS での指定が可能なため一応ご紹介します。
試しにlinear-gradient()で XYZ ベースの色空間を指定してみたところ、見た目上は sRGB リニア (srgb-linear) とほぼ同じ結果となりました。XYZ（xyz）に関しては、画像データとして保存して比較したところ、バイナリレベルで一致しました。
XYZ（xyz）
CIE 1931 色空間とも呼ばれます。物理的な色の特性を元にした色空間ですが、知覚的に均一でなく、非直感的な中間色になることがあります。
background-image: linear-gradient(in xyz to right, blue, red);background-image: linear-gradient(in xyz to right, blue, yellow);background-image: linear-gradient(in xyz to right, black, white);XYZ D50基準白色点（xyz-d50）
D50 白色点を基準とした XYZ 色空間です。印刷・カラーマネジメント向けです。
background-image: linear-gradient(in xyz-d50 to right, blue, red);background-image: linear-gradient(in xyz-d50 to right, blue, yellow);background-image: linear-gradient(in xyz-d50 to right, black, white);XYZ D65基準白色点（xyz-d65）
D65 白色点を基準とした XYZ 色空間です。
background-image: linear-gradient(in xyz-d65 to right, blue, red);background-image: linear-gradient(in xyz-d65 to right, blue, yellow);background-image: linear-gradient(in xyz-d65 to right, black, white);終わりに
CSS のlinear-gradient()やcolor-mix()を使う際、どの色空間を選ぶかで見た目が大きく変わります。特に、知覚に基づいた色空間であるlab, oklab, lch, oklchは、美しい色の変化を得るのに適しているため、CSSで活用すると、より良いデザインが実現できます。