CSS Color 4 は、より多くの色、操作関数、より優れたグラデーションなど、広色域カラーツールと機能をウェブで実現します。
25 年以上、sRGB（標準の赤、緑、青）は CSS のグラデーションと色における唯一の色色域であり、rgb()、hsl()、16 進数などの色空間サービスがあります。ディスプレイの中で最も一般的な色域機能であり、共通点です。この色域内の色を指定することに慣れてきました。
ディスプレイでさまざまな色を表示できるようになったため、CSS ではこれらの広い範囲から色を指定する方法が必要になります。現在のカラー形式には、広い色範囲に対応する言語がありません。
CSS が一度も更新されなければ、90 年代の色域に恒久的に留まり、画像や動画で見られる広色域の製品に合わせられなくなります。トラップ: 人間の目に見える色の 30% のみを表示します。この落とし穴から抜け出すために助けてくれた CSS Color Level 4 に感謝します（主に Lea Verou と Chris Liley が執筆しています）。
Chrome 111 以降では、CSS Color 4 の色域と色空間がサポートされており、2016 年から display-p3 をサポートしている Safari が新たにサポートされます。CSS で HD（高解像度）ディスプレイをサポートできるようになり、HD 色域から色を指定できるようになりました。また、特殊な色空間も提供されます。このガイドでは、この新しい色の世界を活用する方法について説明します。
使ってみる
対応ブラウザでは、選択できる色が 50% 多くなっています。1, 600 万色というのは大変だと思いました。新しい空間で何色を表示できるのか、お楽しみに。また、十分なビット深度がないために帯状になった勾配もすべて解決します。
ディスプレイで最も鮮やかな色であるだけでなく、新しい色空間では、色システムを管理および作成するための独自のツールや方法が提供されます。たとえば、以前は HSL とその「lightness」チャンネルがありました。これは、ウェブ デベロッパーにとって最高水準でした。現在は CSS に LCH の「知覚明度」があります。
さらに、グラデーションとミキシングがアップグレードされ、色空間のサポート、色相補間オプション、バンディングの低減が実現しました。次の図は、アップグレードの混在の一部を示しています。上の 2 つのカラーミックスは sRGB です。下の 2 つのカラーミックスは ディスプレイ p3 ですディスプレイ p3 はより鮮やかな色で、混ぜ合わされて中央は完全な白黒になります。sRGB はやや彩度が低く、中央のミックスは完全な黒または白の結果ではありません。
https://codepen.io/web-dot-dev/pen/poZgXQb
このガイドでは、色がどこに配置され、どこに色が向いているのか、ウェブ デベロッパーによる色の管理を CSS がどのように実現し、サポートするのかについて説明します。
概要
色とウェブの問題は、CSS は高解像度に対応しておらず、ほとんどの人がポケットやラップに置いたり、壁に取り付けたりしているディスプレイは、広色域で高解像度のカラーに対応していることです。ディスプレイのカラー機能は CSS よりも急速に成長しており、今では CSS が対応しています。
「より多くの色」以外にもさまざまな機能を利用できます。この記事を終えると、より多くの色の指定、グラデーションの補正、各タスクに最適な色空間と色域の選択ができるようになります。
色域とは
色域は、対象のサイズを表します。「数百万色」というフレーズは、ディスプレイの色域または選択する必要がある色の範囲に関するコメントです。次の図では、3 つの色域が比較されています。サイズが大きいほど、表示される色が増えます。
色域には名前を付けることもできます。たとえば、バスケットボール、野球、ベンテのコーヒーカップ、グランデなどです。サイズに名前を付けると、コミュニケーションしやすくなります。これらの色域名を学習すると、色の範囲についてコミュニケーションを取り、すばやく理解するのに役立ちます。
この記事では、sRGB よりも広い範囲を持つ 7 つの新しい色域と、使用すべき機能の選択に役立つさまざまな機能について説明します。
人間の視覚色域
色域は多くの場合、人間の視覚色域（人間の目が見ることができると Google が考える色全体）と比較されます。HVS は多くの場合、次のように色度図で表現されます。
最も外側のシェイプは人間が見ることができる形状で、内側の三角形は rgb() 関数範囲（sRGB 色空間）です。
上の三角形は色域サイズを比較しているため、下の三角形が表示されています。これは、色域についての伝達および比較のための業界における方法です。
色空間とは
色空間は色域の配置で、色にアクセスする形状と方法を確立します。多くのものは、立方体や円柱のような単純な 3D 形状です。この色の配置により、隣接する色と、色のアクセスと補間の仕組みが決まります。
RGB は長方形の色空間に似ています。色にアクセスするには、3 軸上の座標を指定します。HSL は円柱色空間であり、色は 2 軸上の色相角と座標によってアクセスされます。
レベル 4 の仕様では、以前に共有した 7 つの新しい色域から色を検索するために、12 の新しい色空間が導入されています。
以前は、以下の 4 つの色空間に加えて、
色域と色空間の概要
色空間は、色域が色の範囲である色のマッピングです。色域は粒子の合計であり、色空間はその粒子範囲を保持するために作られたボトルです。
Alexey Ardov 氏によるインタラクティブなビジュアルでは、色空間を示しています。このデモでは、ポイント、ドラッグ、ズームを行います。色空間を変更すると 他の空間も視覚化されます
- 色域を使用すると、低色域または狭い色域と高色域または広色域など、さまざまな色について説明することができます。
- 色の配置、色の指定、色の操作、色による補間に使用される構文については、色空間を使用します。
より多くの色、新しいスペース、デバッグ結果にアクセスする方法
CSS Color 4 では、CSS と色に関するさまざまな新機能やツールについて説明しています。まず 新機能の導入前は色が あった場所についておさらいします次に、新しい色空間、構文、ツールの概要を説明します。
次の Codepen では、新しい色構文と古い色構文がすべて一緒に表示されます。
従来の色空間の復習
2000 年代から、色を値として受け入れるすべての CSS プロパティで、16 進数（16 進数）、rgb()、rgba()、hotpink などの名前、currentColor などのキーワードを使用できました。2010 年頃には、ブラウザに応じて、CSS で hsl() 色を使用できるようになりました。2017 年には、16 進数（アルファ値）が導入されました。最後に、hwb() がブラウザでのサポートを開始しました。
これらの従来の色空間はすべて、同じ色域（sRGB）内の色を参照しています。
HEX
16 進数色空間では、R、G、B、A を 16 進数で指定します。次のコード例は、この構文で赤、緑、青に加えて不透明度を指定するすべての方法を示しています。
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RGB
RGB 色空間では、赤、緑、青のチャンネルに直接アクセスできます。0 ～ 255 の値、または 0 ～ 100 の割合で指定できます。この構文は、仕様になんらかの構文正規化が組み込まれる前から存在していたため、カンマ構文とノーカンマ構文が日常的に使用されています。今後、カンマは必要なくなりました。
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
HSL
人間の言語とコミュニケーションに向き合う最初の色空間の一つである HSL（色相の彩度と明度）は、sRGB 色域のすべての色を提供し、赤、緑、青がどのように相互作用するかを脳に知らす必要はありません。RGB と同様に、もともと構文にカンマが含まれていましたが、今後はカンマが不要になりました。
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
HWB
人間が色を記述するに向けたもう 1 つの sRGB 色空間は HWB（色相、白色、黒さ）です。作成者は色相を選択し、白または黒を混ぜて好みの色を見つけることができます。
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
ウェブの新しい色空間のご紹介
次の色空間では、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
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
この投稿の最初の部分では、RGB 色域外の色にアクセスするための構文を紹介します。また、ディスプレイの色域外の色の作成を非常に簡単にした最初の機能でもあります。これは、CIE 空間の色（lch、oklch、lab、oklab）が、人間の目に見える色スペクトル全体を表現できるためです。
この色空間は人間の視覚に基づいてモデル化されており、色などを指定するための構文を備えています。LCH チャンネルは明度、彩度、色相ですHSL や HWB のように色相が角度であること。明度は 0 ～ 100 の値で指定できますが、HSL の明度とは異なり、「知覚的に直線的な」人間中心の特別な明度です。彩度は飽和度に似ています。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 は 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 のホワイト ポイントを使用します。
メリット
- リニアライト アクセスには便利なユースケースがあります。
- 物理的な色を混ぜるのに最適です。
短所
- 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);
}
Codepen のデモが表示されない場合
次に、ある空間の色からまったく別の空間の色に移行するとどうなるでしょうか。
.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%));
}
Codepen のデモが表示されない場合
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 つの技法が加わったと考えてください。
さまざまな色空間でのグラデーション
色空間はそれぞれ固有の形状と色配置により、異なるグラデーションになります。以下の例、特に「青から白」の例をご覧ください。 色空間によって処理方法が異なることを確認しましょう。中央でいくつが紫色になるかに注目してください。これは補間中の「色相シフト」と呼ばれます。
Codepen のデモが表示されない場合
ここに示されている画像は、Codepen の多くの例の 1 つにすぎません。Canary か Safari Tech Preview で、こうした機能を試すことをおすすめします。
このようなスペースの一部のグラデーションは、他のグラデーションよりも鮮やかになり、デッドゾーンを通過しにくくなります。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%));
}
Codepen のデモが表示されない場合
この例では、hwb と同じ色を使用していますが、補間用の色空間を hwb または oklab に指定しています。hwb は高彩度ですが、デッドゾーンやブライト スポットが発生する可能性がある色空間（上の例のシアンのホットスポットを参照）には最適な色空間です。oklab は、飽和状態を保つ、知覚的には線形グラデーションに適しています。この機能はとても便利です。色空間をいくつか試して、どのグラデーションが一番好きかを試すことができます。
次の Codepen では、可能性を探るためにグラデーションと色空間、混合戦略、マッチング戦略を試しています。黒から白への遷移も色空間ごとに異なります。
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 CSS カラーに移行しています
広色域ディスプレイをサポートするためにウェブ プロジェクトの色を更新する方法は、主に 2 つあります。
グレースフル デグラデーション
新しい色空間を使用して、ブラウザとオペレーティング システムがディスプレイ機能に基づいて表示する色を判断します。プログレッシブ エンハンスメント
@supportsと@mediaを使用して、ユーザーのブラウザの機能を評価し、条件を満たしている場合は広色域を提供します。
ブラウザが display-p3 の色を認識できない場合:
color: red;
color: color(display-p3 1 0 0);
ブラウザが display-p3 の色を認識できる場合:
color: red;
color: color(display-p3 1 0 0);
それぞれに長所と短所があります。以下に、長所と短所を簡単にリストします。
グレースフル デグラデーション
- 長所
- 最もシンプルなルート。
- 広色域ディスプレイでない場合、ブラウザは色域マッピングまたは sRGB へのクランプを行うため、役割はブラウザにあります。
- 短所
- ブラウザによっては、色域が固定されたり、色域が適さない色にマップされたりすることがあります。
- ブラウザが色のリクエストを認識せず、完全に失敗する可能性があります。ただし、この問題は、色を 2 回指定して、認識できる前の色にカスケード フォールバックすることで軽減できます。
プログレッシブ エンハンスメント
- 長所
- 色再現性を管理して、より細かい制御が可能。
- 現在の色に影響しない追加的な戦略。
- 短所
- 2 つの異なるカラー構文を管理する必要があります。
- 2 つの異なる色域を管理する必要があります。
色域と色空間のサポートを確認する
ブラウザでは、CSS と JavaScript の広色域機能と色構文のサポートを確認できます。ユーザーが利用できる正確な色域は不明で、ユーザーのプライバシーが維持されるように一般化された回答が提供されます。ただし、色域のようにユーザーのハードウェアの機能に固有のものではないため、正確な色空間のサポートを利用できます。
色域サポートクエリ
次のコードサンプルでは、アクセスしたユーザーのディスプレイの色の範囲を確認します。
CSS からの確認
最も具体的なサポート問い合わせは、dynamic-range メディアクエリです。
@media (dynamic-range: high) {
/* safe to use HD colors */
}
color-gamut メディアクエリを使用して、おおよそまたはそれ以上のサポートを照会できます。
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
サポートを確認するために、次の 2 つのメディアクエリも使用できます。
JavaScript から確認する
JavaScript の場合は、window.matchMedia() 関数を呼び出して、評価用のメディアクエリを渡すことができます。
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
上記のパターンは、残りのメディアクエリにコピーできます。
色空間サポートクエリ
次のコードサンプルでは、アクセスしたユーザーのブラウザと、使用する色空間の選択を確認します。
CSS からの確認
個々の色空間のサポートは、@supports クエリを使用して照会できます。
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
JavaScript から確認する
JavaScript の場合は、CSS.supports() 関数を呼び出してプロパティと値のペアを渡し、ブラウザが認識しているかどうかを確認できます。
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
ハードウェアと解析チェックをまとめる
各ブラウザがこれらの新しいカラー機能を実装するのを待つ間、ハードウェア機能と色解析機能の両方を確認することをおすすめします。これは、色を段階的に高解像度にする場合によく使用します。
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Chrome DevTools を使用した色のデバッグ
Chrome DevTools が更新され、HD カラーの作成、変換、デバッグに役立つ新しいツールが導入されました。
カラー選択ツールを更新しました
カラー選択ツールで新しい色空間がすべてサポートされるようになりました。作成者は、それまでと同じようにチャンネル値を操作できます。
色域境界
色域境界線も追加され、sRGB 色域と display-p3 色域の間の線を引きます。選択した色がどの色域に含まれるかを明確にする。
これにより、作成者は HD の色と HD 以外の色を視覚的に区別できるようになります。
color() 関数と新しい色空間は HD 以外の色と HD 色の両方を生成できるため、特に便利です。色域を確認する場合は、カラー選択ツールをポップアップ表示します。
色の変換
DevTools では、長年にわたり、サポートされている形式（hsl、hwb、RGB、hex など）間で色を変換できています。[スタイル] ペインの正方形の色見本の shift + click。この変換を行います。新しいカラーツールでは、変換が循環するのではなく、ポップアップが表示され、作成者は必要な変換を確認して選択できます。
変換するときは、スペースに合わせてコンバージョンがクリップされているかどうかを把握することが重要です。DevTools に、このクリップについて警告する、変換後の色の警告アイコンが追加されました。
DevTools の CSS デバッグ機能について詳しくは、最近のお知らせをご覧ください。
おわりに
ウェブ上では sRGB 以外の色空間は開発されたばかりですが、今後、デザイナーやデベロッパーによる使用が増えることになると思います。たとえば、デザイン システムを構築する色空間を知ることは、クリエイターのツールベルトにとって強力なツールです。色空間にはそれぞれ固有の機能と、それが CSS 仕様に追加された理由があります。これらは小さなものから始めて、必要に応じて追加しても問題ありません。
新色のおもちゃで遊ぼう！より鮮明で一貫性のある操作と補間により、全体として、よりカラフルなユーザー エクスペリエンスを提供できます。
その他の情報
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
- https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
- https://darker.ink/writings/Towards-richer-colors-on-the-Web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualization
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/TR/css-color-4/
- https://www.w3.org/TR/css-color-5/
- https://en.wikipedia.org/wiki/CIE_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-spaces/