このドキュメントは、高精細 CSS カラーガイドの一部です。
CSS Color 4 では、CSS と色に関するさまざまな新機能やツールについて説明しています。次の Codepen では、新しい色構文と古い色構文がすべて一緒に表示されます。
従来の色空間のまとめを確認する。
レベル 4 の仕様では、以前に共有した 7 つの新しい色域から、色を検索するための 12 個の新しい色空間が導入されました。
ウェブの新しい色空間のご紹介
次の色空間では、sRGB よりも広い色域にアクセスできます。display-p3 の色空間は RGB のほぼ 2 倍の色を提供し、Rec2020 の色は display-p3 のほぼ 2 倍になります。たくさんの色ですね！
color() 関数
新しい color() 関数は、R、G、B チャネルで色を指定する任意の色空間に使用できます。color() は、最初に色空間パラメータを受け取り、次に RGB の一連のチャンネル値と、必要に応じてアルファを受け取ります。
新しい色空間の多くでこの関数が使用されています。これは、rgb、srgb、hsl、hwb などの特殊な関数のリストが長くなり、色空間をパラメータにするのが容易になったためです。
メリット
- RGB チャネルを使用する色空間にアクセスするための正規化された空間。
- 広色域 RGB ベースの色空間までスケールアップできます。
短所
- HSL、HWB、LCH、okLCH、okLAB では機能しません
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
sRGB（color() を使用）
この色空間は rgb() と同じ機能を提供します。また、0 ～ 1 の小数も使用でき、0% ～ 100% とまったく同じように使用できます。
メリット
- ほぼすべてのディスプレイがこの色空間の範囲をサポートしています。
- デザインツールのサポート。
短所
- 知覚的に線形ではない（
lch()など） - 広色域なし。
- 多くの場合、勾配は「デッドゾーン」を通過します。
.valid-css-srgb-colors {
--percents: color(srgb 34% 58% 73%);
--decimals: color(srgb .34 .58 .73);
--percents-with-opacity: color(srgb 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb none none none);
--empty-channels-black2: color(srgb);
}
color() によるリニア sRGB {#linear-sRGB}
RGB に代えて線形チャネルを使用することで、チャネル強度を予測できます。
メリット
- RGB チャンネルに直接アクセスでき、ゲームエンジンやライトショーなどに便利です。
短所
- 感覚的に線形ではない。
- 端に白黒が詰め込まれている。
.valid-css-srgb-linear-colors {
--percents: color(srgb-linear 34% 58% 73%);
--decimals: color(srgb-linear .34 .58 .73);
--percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb-linear none none none);
--empty-channels-black2: color(srgb-linear);
}
グラデーションについては後で詳しく説明しますが、srgb と linear-srgb の黒から白へのグラデーションで、それぞれの違いを簡単に確認できます。
LCH
LCH では、RGB 色域外の色にアクセスするための構文が導入されています。また、ディスプレイの色域外の色の作成を非常に簡単にした最初の機能でもあります。これは、あらゆる CIE 空間の色（lch、oklch、lab、oklab）が人間の可視カラー スペクトル全体を表現できるためです。
この色空間は人間の視覚に基づいてモデル化されており、色などを指定するための構文を備えています。LCH チャンネルは明度、彩度、色相ですHSL や HWB のように色相が角度であること。明度は 0 ～ 100 の値です。これは、人間中心の特別な「知覚的に直線的な」明度です。彩度は飽和度に似ています。0 ～ 230 の範囲になりますが、技術的には制限がありません。
メリット
- ほとんどの場合、知覚的に線形であるため、予測可能な色操作が可能です（oklch を参照）。
- 使い慣れたチャネルを使用する。
- 多くの場合、鮮やかなグラデーションになります。
短所
- 色域を簡単に調整できます。
- まれに、色相の変化を防ぐためにグラデーションに調整の中間点が必要になることがあります。
.valid-css-lch-colors {
--percent-and-degrees: lch(58% 32 241deg);
--just-the-degrees: lch(58 32 241deg);
--minimal: lch(58 32 241);
--percent-opacity: lch(58% 32 241 / 50%);
--decimal-opacity: lch(58% 32 241 / .5);
/* chromaless and hueless */
--empty-channels-white: lch(100 none none);
--empty-channels-black: lch(none none none);
}
ラボ
CIE 色域にアクセスするために作成された別の色空間。ここでも知覚的に線形の明度（L）次元を使用します。LAB の A と B は、人間の色覚の固有の軸（赤 - 緑、青 - 黄）を表します。A に正の値を指定すると赤が追加され、0 未満の場合は緑が追加されます。B に正の数値を指定すると黄色が追加され、負の値は青色になります。
メリット
- 知覚的に整合するグラデーション。
- ハイ ダイナミック レンジ。
短所
- 色相が変化する可能性があります。
- 値を読み取るときに、作成者を指示したり色を推測したりするのが難しい。
.valid-css-lab-colors {
--percent-and-degrees: lab(58% -16 -30);
--minimal: lab(58 -16 -30);
--percent-opacity: lab(58% -16 -30 / 50%);
--decimal-opacity: lab(58% -16 -30 / .5);
/* chromaless and hueless */
--empty-channels-white: lab(100 none none);
--empty-channels-black: lab(none none none);
}
OKLCH
この色空間は LCH を修正します。また、LCH と同様に、(L) は知覚的に線形の明度を表し、C は彩度を表し、H は色相を表します。
HSL や LCH を使ったことがある方は、このスペースに馴染みがあるでしょう。H のカラーホイールで角度を選択し、L を調整して明度または暗さの量を選択しますが、彩度ではなく彩度になります。明度と彩度の調整はペアで行う傾向があるという点を除けば、まったく同じです。そうでない場合は、目標色域から外れる高い彩度が要求されやすくなります。
メリット
- 青と紫の色合いで作業がスムーズです。
- 視覚的に線形の明度。
- 使い慣れたチャネルを使用する。
- ハイ ダイナミック レンジ。
- Evil Martians によるモダンなカラー選択ツールを搭載。
短所
- 色域を簡単に調整できます。
- 比較的新しく、あまり利用されていない。
- カラー選択ツールがいくつか用意されています。
.valid-css-oklch-colors {
--percent-and-degrees: oklch(64% .1 233deg);
--just-the-degrees: oklch(64 .1 233deg);
--minimal: oklch(64 .1 233);
--percent-opacity: oklch(64% .1 233 / 50%);
--decimal-opacity: oklch(64% .1 233 / .5);
/* chromaless and hueless */
--empty-channels-white: oklch(100 none none);
--empty-channels-black: oklch(none none none);
}
OKLAB
このスペースは LAB の修正です。また、画像処理品質に最適化された空間であると主張されています。CSS では、グラデーションと色関数の操作品質を意味します。
メリット
- アニメーションと補間用のデフォルトのスペース。
- 視覚的に線形の明度。
- LAB のような色相の変化はありません。
- 知覚的に整合するグラデーション。
短所
- 比較的新しく、あまり利用されていない。
- カラー選択ツールがいくつか用意されています。
.valid-css-oklab-colors {
--percent-and-degrees: oklab(64% -.1 -.1);
--minimal: oklab(64 -.1 -.1);
--percent-opacity: oklab(64% -.1 -.1 / 50%);
--decimal-opacity: oklab(64% -.1 -.1 / .5);
/* chromaless and hueless */
--empty-channels-white: oklab(100 none none);
--empty-channels-black: oklab(none none none);
}
ディスプレイ P3
ディスプレイ P3 の色域と色空間は、Apple が 2015 年から iMac でサポートして以来、普及しています。Apple は 2016 年以降、CSS を介したウェブページで display-p3 もサポートしています。これは、他のブラウザよりも 5 年早くなっています。sRGB から取得する場合は、スタイルをより広いダイナミック レンジに移動するときに作業を開始するのに最適な色空間です。
メリット
- 優れたサポートが、HDR ディスプレイのベースラインと見なされている。
- sRGB より 50% 多い色数。
- DevTools には優れたカラー選択ツールが用意されています。
短所
- 最終的には Rec2020 空間と CIE 空間が超える。
.valid-css-display-p3-colors {
--percents: color(display-p3 34% 58% 73%);
--decimals: color(display-p3 .34 .58 .73);
--percent-opacity: color(display-p3 34% 58% 73% / 50%);
--decimal-opacity: color(display-p3 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(display-p3 none none none);
--empty-channels-black2: color(display-p3);
}
Rec2020
Rec2020 は UHDTV（超高画質テレビ）への移行の一環で、4K と 8K のメディアで使用できる幅広い色を提供します。Rec2020 も RGB ベースの色域で、display-p3 より大きくなりますが、Display P3 ほど一般的ではありません。
メリット
- Ultra HD カラー。
短所
- 消費者の間では（まだ）一般的ではありません。
- ハンドヘルドやタブレットでは一般的ではありません。
.valid-css-rec2020-colors {
--percents: color(rec2020 34% 58% 73%);
--decimals: color(rec2020 .34 .58 .73);
--percent-opacity: color(rec2020 34% 58% 73% / 50%);
--decimal-opacity: color(rec2020 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
A98 RGB {#a98-RGB}
A98 RGB は Adobe 1998 RGB の略称で、CMYK プリンタで実現できるほとんどの色を再現するために Adobe によって開発されました。sRGB よりも多くの色が用意されており、特にシアンとグリーンの色が存在します。
メリット
- sRGB や Display P3 の色空間よりも大きくなります。
短所
- デジタル デザイナーが仕事をするスペースは一般的ではありません。
- CMYK からパレットを移植している人はあまりいません。
.valid-css-a98-rgb-colors {
--percents: color(a98-rgb 34% 58% 73%);
--decimals: color(a98-rgb .34 .58 .73);
--percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(a98-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(a98-rgb none none none);
--empty-channels-black2: color(a98-rgb);
}
ProPhoto RGB
Kodak により開発されたこの広色域空間は、独自の超広色域原色を提供し、明度変更時の色相シフトを最小限に抑えます。また、1980 年に Michael Pointer が文書化した実際のサーフェスの色を 100% カバーしていると主張しています。
メリット
- 明度を変更すると色相の変化が最小限になります。
- 鮮やかな原色。
短所
- 提供される色の約 13% は架空の色です。つまり、人間が認識できるスペクトルに含まれません。
.valid-css-prophoto-rgb-colors {
--percents: color(prophoto-rgb 34% 58% 73%);
--decimals: color(prophoto-rgb .34 .58 .73);
--percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(prophoto-rgb none none none);
--empty-channels-black2: color(prophoto-rgb);
}
XYZ、XYZ-d50、XYZ-d65
CIE XYZ 色空間には、平均的な視力を持つ人に見えるすべての色が含まれます。そのため、他の色空間の標準参照として使用されます。Y は輝度、X と Z は指定された Y 輝度内で可能な彩度です。
d50 と d65 の差がホワイト ポイントであり、d50 は d50 のホワイト ポイントを使用し、d65 は d65 のホワイト ポイントを使用します。
重要な用語: ホワイト ポイントは色空間の属性であり、空間内のトゥルーホワイトが存在します。電子画面の場合、D65 は最も一般的なホワイト ポイントで、6,500 ケルビンの略です。色変換では、色温度（暖かさや寒さ）に影響しないように、ホワイト ポイントが一致することが重要です。
メリット
- リニアライト アクセスには便利なユースケースがあります。
- 物理的な色を混ぜるのに最適です。
短所
- lch、oklch、lab、oklab のように、知覚的には線形ではありません。
.valid-css-xyz-colors {
--percents: color(xyz 22% 26% 53%);
--decimals: color(xyz .22 .26 .53);
--percent-opacity: color(xyz .22 .26 .53 / 50%);
--decimal-opacity: color(xyz .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz none none none);
--empty-channels-black2: color(xyz);
}
.valid-css-xyz-d50-colors {
--percents: color(xyz-d50 22% 26% 53%);
--decimals: color(xyz-d50 .22 .26 .53);
--percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d50 none none none);
--empty-channels-black2: color(xyz-d50);
}
.valid-css-xyz-d65-colors {
--percents: color(xyz-d65 22% 26% 53%);
--decimals: color(xyz-d65 .22 .26 .53);
--percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d65 none none none);
--empty-channels-black2: color(xyz-d65);
}
カスタム色空間
CSS Color 5 仕様には、ブラウザにカスタム色空間を学習するためのパスもあります。これは、色の解決方法をブラウザに伝える ICC プロファイルです。
@color-profile --foo {
src: url(path/to/custom.icc);
}
読み込まれたら、color() 関数を使用してこのカスタム プロファイルから色にアクセスし、チャネル値を指定します。
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
色補間
ある色から別の色への移行は、アニメーション、グラデーション、色の混在で行われます。この遷移は通常、開始色と終了色として指定され、ブラウザは両者の間で補間されることを想定しています。この場合の補間とは、中間となる一連の色を生成して、即時の遷移ではなくスムーズな遷移を作成することを意味します。
グラデーションでは、形状に沿って一連の色が補間されます。アニメーションでは、時間の経過に伴う一連の色になります。
@keyframes bg {
0%, 100% {
background: orange;
}
25% {
background: magenta;
}
50% {
background: lime;
}
75% {
background: cyan;
}
}
.circle {
animation: bg 5s ease-in-out infinite;
}
グラデーションを使用すると、中間となる色がすべて一度に表示されます。
色補間の新機能
新しい色域と色空間が追加され、補間用の新しいオプションが追加されました。色 in hsl を青から白に移行すると、sRGB とは大きく異なります。
.classic-gradient-in-srgb {
background: linear-gradient(to right, blue, white);
}
.new-gradient-in-hsl {
background: linear-gradient(in hsl to right, blue, white);
}
次に、ある空間の色からまったく別の空間の色に移行するとどうなるでしょうか。
.gradient {
/* oklab will be the common space */
background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}
.lch {
/* lch is specified */
background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}
Color 4 の仕様には、このようなクロス色空間補間の処理方法に関するブラウザ向けの手順が記載されています。.gradient の場合、ブラウザは区別される色空間を認識し、デフォルトの色空間 oklab を使用します。
ブラウザでは lch が最初の色であるため、色空間として使用されると思われるかもしれませんが、そうではありません。そのため、2 つ目の比較グラデーション .lch を紹介します。.lch グラデーションは、lch 色空間のグラデーションです。
16 ビットカラーにより縞模様が減少
このカラー処理以前は、すべての色が 1 つの 32 ビット整数（赤、緑、青、アルファ）で保存されていました。これはチャンネルあたり 8 ビットで、2^ 24 色（アルファを無視）です。2 ^ 24 = 16,777,216, "数百万色"
このカラー処理（4 つの 16 ビット浮動小数点値）を行うと、各チャンネルはまとめられるのではなく、独自の浮動小数点数になります。これは合計 64 ビットのデータで、数百万色以上になります。
この作業は HD カラーをサポートするために必要です。これにより、保存できる色情報の量が増え、ブラウザがグラデーションで使用する色が増えるという副作用が起きます。
グラデーションの縞模様は、滑らかなグラデーションを作成するのに十分な色がなく、色の「ストリップ」が見える場合です。高解像度カラーへのアップグレードにより、縞模様がかなり軽減されます。
コントロールの補間
2 点間の最短距離は常に直線になります。色補間機能により、ブラウザはデフォルトで短縮ルートを使用します。HSL のカラーシリンダーに 2 つのポイントがあるシナリオについて考えてみましょう。グラデーションは、2 つのポイント間の線に沿って移動することで色ステップを取得します。
linear-gradient(to right, #94e99c, #e06242)
カラーストップ間に線がある HSL 円柱を上から見た画像
上のグラデーション線は、緑色と赤色の間に直線的に色空間の中心を通っています。上の説明は最初の理解に役立ちますが、正確にはわかりません。次の Codepen のグラデーションを次に示します。モックデモで示したように、中央のグラデーションは明らかに白ではありません。
ただし、グラデーションの中間領域の鮮やかさは失われています。これは、最も鮮やかな色が、補間が行われた中心ではなく、色空間シェイプの端にあるためです。これは一般に「デッドゾーン」と呼ばれます。これを修正または回避する方法はいくつかあります。
デッドゾーンを避けるために勾配停止を指定する
現時点でのデッドゾーンを回避する方法として、グラデーションにカラーストップを追加して、意図的に色空間の鮮やかな範囲内に収まるように補間を行います。こうなると、停車地が追加されれば行き止まりの事態を回避できます。
Erik Kennedy が作成したグラデーション ツールを使用すると、追加のカラーストップを計算できます。このツールを使うと、色空間に引き寄せられる傾向がある色空間でも、行き詰まりを避けることができます。これを使用して、最初の例と同じ色を渡し、色補間を HSL に変更すると、次のようになります。
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
9 つのカラーストップがある曲線を持つ HSL 円柱を上から見た画像
ガイド付きのストップ ポイントを使用すると、補間は直線ではなくなりますが、不感帯を中心にカーブしているように見えるため、彩度を維持しやすくなり、より鮮明なグラデーションになります。
このツールは非常に便利ですが、CSS から同様の、またはより高度な制御を直接行えるとしたらどうでしょうか。
色補間を指示する
色 4 では、色相補間戦略を制御する機能が追加され、これは（:wink:）死角を回避するための新しい方法です。色相角について考えてみましょう。たとえば、140deg から 240deg に色相シフトする、角度のみを変更する 2 段階のグラデーションについて考えてみましょう。
色相補間の短い形式と長い形式
longer ルートを使用するように指定しない限り、グラデーションはデフォルトで shorter ルートを使用します。色相補間オプションは、角度の回転を指示します。たとえば、右ではなく左に曲がるように指示するなどです。
色相補間距離の例では、違いを説明するために、短いパスと長いパスがシミュレートされます。短い距離では、移動距離が可能な限り短くなるため、距離が短いほど色相が低くなります。つまり、長い距離では色相が長くなります。
色相補間の増加と減少
Color 4 には他にも 2 つの色相補間戦略がありますが、これらは円柱色空間専用です。上の例の 2 つの色を使用して、増加と減少がどのように機能するかが図示されています。
上記の Codepen では、ColorJS を使用して、想定される結果を示しました。JavaScript ライブラリを使用せずに同じ効果を実現するには、次の CSS を作成します。
.longer-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl longer hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
.decreasing-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl decreasing hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
色相補間を締めくくるには、2 つのカラーストップ間で色相を変更し、色相補間の選択による効果と、色空間がグラデーションの結果をどのように変化するかを確認できる楽しいプレイグラウンドがあります。効果はまったく異なる場合があります。カラー ツールバーに新たに 4 つの技法が加わったと考えてください。
さまざまな色空間でのグラデーション
色空間はそれぞれ固有の形状と色配置により、異なるグラデーションになります。以下の例で、各色空間での処理方法（特に青から白）に注目してください。中央でいくつが紫色になるかに注目してください。これは補間中の色相シフトと呼ばれます。
このような空間の一部の勾配は、他よりも鮮やかであるか、デッドゾーンを通過しにくくなります。lab のようなスペースは、hwb() のような人間が色を書くのに最適化されたスペースとは異なり、彩度に合わせて最適化された方法で色をまとめます。
.hwb {
background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}
上記のデモは、結果ではわかりにくいものの、ラボでの補間により整合性がとれています。しかし、lab の構文は単純ではありません。RGB や hsl から来る場合はあまり馴染みのない負の数があります。使い慣れた構文には hwb を使用できますが、グラデーションは oklab など別の色空間内に完全に補間するように要求できます。
.hwb {
background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
この例では、hwb と同じ色を使用していますが、補間用の色空間を hwb または oklab に指定しています。hwb は高彩度ですが、デッドゾーンやブライト スポットが発生する可能性がある色空間（上の例のシアンのホットスポットを参照）には最適な色空間です。oklab は、飽和状態を保つ、知覚的には線形グラデーションに適しています。この機能はとても便利です。色空間をいくつか試して、どのグラデーションが一番好きかを試すことができます。
次の Codepen では、可能性を探るためにグラデーションと色空間、混合戦略、マッチング戦略を試しています。黒から白への遷移も色空間ごとに異なります。
色域クランプ
色域が色域外のものを要求するシナリオも存在します。次の色について考えてみましょう。
rgb(300 255 255)
rgb 色空間のカラーチャネルの最大数は 255 ですが、ここでは赤に 300 が指定されています。どうなるでしょうか。色域クランプ。
クランプとは、余分な情報を単に取り除くことです。300 は、カラーエンジンに対して内部的に 255 になります。これで、色がスペース内に収まりました。
色空間を選択する
多くのユーザーは、これらの色空間とその効果について学んだ後、圧倒され、どの「1 つ」を選択すべきか知りたいと考えています。これまでの研究と経験から、1 つの色空間がすべてのタスクに 1 つの色空間であるとは考えていません。それぞれに、望ましい結果を生み出す瞬間があります。
最適なスペースが 1 つあれば、新しいスペースがそれほど多く導入されることはありません。
しかし、CIE 空間（lab、oklab、lch、oklch）を出発点と言えます。期待どおりの結果が得られない場合は、他のスペースをテストします。色の混在とグラデーションの作成については、デフォルトの仕様選択である oklab に同意します。カラーシステムと UI 全体の色については、oklch が好きです。
これらの新しい色空間と機能を考慮して、最新のカラー戦略を共有している記事をいくつか紹介します。たとえば、Andrey Sitnik が oklch に全面的に参加しています。おそらく、あなたも同じことをするよう説得してくれるでしょう。
次のステップ
新しい色空間とツールに慣れたので、HD カラーに移行してみましょう。
より鮮やかで一貫性のある操作と補間により、全体として、よりカラフルなユーザー エクスペリエンスを実現できます。
ガイドの他のカラーリソースを確認する。