OSC があなたをパーティーにご招待します! 1028蘇州園創立協会、AI時代の宝物を探しましょう

導入

最近、3 つの主要なブラウザエンジンが、W3C CSS Color 4 標準をサポートする最新バージョンをリリースしました。これには、新しい色の選択方法と対応する構文が含まれており、より多くの色域と色空間を表示できます。これは、Web でより多くの色を表示できることを意味します。 . より豊かで高精細な色彩。現在、最新のブラウザーの最新バージョンでのみサポートされていますが、この新しい標準を事前に確認することができます。color()

この記事では、まず新しい標準が必要な理由を理解するために色のいくつかの基本概念を簡単に紹介し、次に新しい標準で使用されるメソッドと構文を紹介します。

基本概念

色域

オプションの色の範囲を指します。たとえば、Web で広く使用されている色域規格である sRGB 色域では、赤、緑、青を基本色として使用し、色値の範囲は 0 ～ 255 であり、これら 3 つの基本色を混合すると、 255*255 を表示可能 ※255 色、sRGB の色域とおおよそ理解できます。

最新の Web CSS で使用される sRGB 色域は、基本的な色の要件のみを満たしており、表示できる色の範囲は人間の目が認識できる色の範囲よりもはるかに小さく、高解像度の表示の要件にもはるかに及ばない。

以下は、sRGB と他のいくつかの色域標準の色値範囲の比較です。

以下は、sRGB と人間の目で認識できる色域の比較です。

色空間

色空間は、特定の色域標準に基づく空間数学モデルとして理解できます。たとえば、正方形や円柱の単純な 3D モデルなどで、色域内の各色の空間位置、各色の関係をマークするために使用できます。色等。

再び sRGB を例に挙げると、赤、緑、青の 3 つの基本色を 3 つの線形座標軸として設定でき、各色を CSS で使用される立方体の点としてマークできます。色を取得するために使用され、パラメータは色空間における指定された色の座標 (R、G、B) です。

もう 1 つの例は、CSS の別の色選択方法である hsl() で、完全に異なる色空間 HSL を使用します。H hue (色相) は、角度軸として使用できる 0 から 360 の範囲の値を持つ角度です。彩度(Saturation)とL明度(Lightness)を直線の2軸として円筒空間として構築でき、CSSでは色を表現するためにhsl(H,S,L)が使用されます。

色域標準は、異なる色空間を使用して記述することができ、異なる色域標準でも同じタイプの色空間表現を使用することができます。たとえば、sRGB は、などの方法で記述でき、Display-P3 や Rec2020 などの色域は (R, G, B) 色空間で記述できますが、空間の境界範囲が異なります。rgb()hsl()hwb()

HD カラーをサポートする理由

高解像度とは色域の範囲が広いことを意味します。まず、狭い色域と広い色域の視覚的な違いを直感的に感じてみましょう。

実際の CSS カラー値では、さまざまな色空間に対応する多くのメソッド、、、が一般的に使用されますが、それらはすべて同じ色域内の色、つまり人間の目が認識できるもののみを表示できる sRGB 内の色を使用します。色の % では、1990 年代のテレビを使用して 4K 映画を再生しているようなものです。rgb()rgba()hsl()hwb()

現在のネットワークディスプレイデバイスの多くは依然として sRGB 標準を使用しており、広色域標準の色の表示をサポートしていませんが、一部の HDR ディスプレイ、ビデオ録画機器、および映画制作のみが Display P3 などの広色域標準を使用しています。しかし、高精細度に対する需要は高まる一方であり、より広い色域規格をサポートすることは、将来の Web サイドディスプレイの目標の 1 つとなるでしょう。

この傾向に対応して、W3C の CSS Color 4 標準では、さまざまな色域標準の下で色をより柔軟に指定し、色のグラデーションをより適切に表示できる新しいメソッドとその他の構文が定義されています。最近では、3大WebブラウザもW3Cの新規格をサポートするようになった。color()

CSSカラー4

既存の色空間を見直す

2000 年以来、色の値を指定する多くの方法がありました:カラー値 ( 、)、、、または特定の色の文字 ( など)。2010 年頃からブラウザがメソッドをサポートし始めました。2017 年には、カラー値透明度のサポートが拡張され、その後、さまざまなブラウザーでこのメソッドのサポートが追加されました。hex#rgb#rrggbbrgb()rgba()whitepinkhsl()hex#rrggbbaahwb()

異なる方式は異なる色空間に対応しますが、色域は同じ、つまり sRGB です。

16進数

R、G、B、Aの値をそれぞれ16進数で表します。

.valid-css-hex-colors {
  /* 一般标准 */
  --3-digits: #49b;
  --6-digits: #4499bb;

  /* 带透明度 */
  --4-digits-opaque: #f9bf; /* 不透明 */
  --8-digits-opaque: #ff99bbff; /* 不透明 */
  --4-digits-with-opacity: #49b8; /* 透明度88% */
  --8-digits-with-opacity: #4499bb88; /* 透明度88% */
}

RGB

R、G、B を指定するには、0 ～ 255 の 10 進数または 0% ～ 100% のパーセンテージを使用します。透明度 A は、0 ～ 1 のパーセンテージまたは数値で表されます。

.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

この色空間は、基本的な赤、緑、青の色がどのように混合されるかを理解する必要がなく、人間の自然な理解により一致しています。パラメータはそれぞれ以下を表します。

H: 色相、色相、値 0deg~360deg
S：彩度、彩度、値 0%～100%
L：明度、明るさ、値 0%～100%

.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);

  /* 无色相和饱和度，仅用亮度可表示黑白色 */
  --empty-channels-white:hsl(none none 100%);
  --empty-channels-black:hsl(none none 0%);
}

ブースト

形式は HSL に似ていますが、使用される 3 つの次元は次のとおりです。

H: 色相、色相、値 0deg~360deg;
W:白色度、白色濃度(0~100%)。
B:黒色度、黒色濃度(0~100%)。

.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);

  /* 无色相和饱和度，仅用亮度可表示黑白色 */
  --empty-channels-white:hwb(none 100% none);
  --empty-channels-black:hwb(none none 100%);
}

新しいメソッド color()

新しいメソッドのパラメータはメソッドと似ており、R、G、B の 3 つの線形軸の値を使用して色を指定しますが、メソッドの最初のパラメータが他のパラメータで色空間識別子を受け取ることができる点が異なります。 sRGB を除く色域、および R、G、B の値は 0 ～ 1 または 0% ～ 100% のみをサポートします。color()rgb()color()

.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);
}

メソッド定義: color(colorspace c1 c2 c3[ / A])

パラメータ colorspace: 使用する色空間を示す識別子。オプションの値には、、、、、、、、、およびが含まれます。srgbsrgb-lineardisplay-p3a98-rgbprophoto-rgbrec2020xyzxyz-d50xyz-d65
パラメータ c1、c2、c3: 指定された色空間の各パラメータ値に対応する数値 (0~1) 、パーセント、またはなしにすることができます。たとえば、R、G、B、特定の色空間を参照する必要がある色の次元について説明します。srgbsrgb-lineardisplay-p3
パラメータ A: オプション。数値 (0 ～ 1)、パーセンテージ、またはなしで、色の透明度を示します。

color() を使用してさまざまな色空間を記述する

sRGB

0 ～ 255 の値はサポートされなくなり、実際にはパーセント形式と同等の 0 ～ 1 の範囲に変更されました。1 より大きい値が渡された場合、デフォルトでは 1 として解析されます。

.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);

  /* 色值为none或空时，表示黑色 */
  --empty-channels-black:color(srgb none none none);
  --empty-channels-black2:color(srgb);
}

リニアsRGB

リニア sRGB と sRGB は異なる色空間です。sRGB の値はガンマカーブ関数によって補正され、線形に変化しません。人間の目の知覚特性により適しています。つまり、明暗の知覚が鈍くなります。 -linear; 一方、Linear sRGB の色の変化は線形であり、明暗が 0 から 1 に変化するときの 2 つの色空間の実際の勾配傾向は次のとおりです。

.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);

  /* 色值为none或空时，表示黑色 */
  --empty-channels-black:color(srgb-linear none none none);
  --empty-channels-black2:color(srgb-linear);
}

展示P3、Rec2020

ディスプレイ P3 は Apple によって最初に宣伝されました。現在、この規格は HDR ディスプレイの基本規格となっており、sRGB よりも 50% 多くの色を表示できます。Rec2020規格はディスプレイP3より色域が広く、4Kや8K画像の表示も可能ですが、現時点ではこの規格に対応した端末ディスプレイは非常に少ないです。どちらの色域も RGB を使用して記述されます。

.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);

  /* 无色度色相，展示为黑色 */
  --empty-channels-black:color(display-p3 none none none);
  --empty-channels-black2:color(display-p3);
}

.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);

  /* 无色度色相，展示为黑色 */
  --empty-channels-black: color(rec2020 none none none);
  --empty-channels-black2: color(rec2020);
}

CIE規格

冒頭の2つの色域図に戻りますと、RGBに基づいて記述される色域は、3つの基本色が混合されているため、基本的には三角形になりますが、人間の目で認識できる色域は形が異なることがわかります。馬蹄のようなグラフ（具体的な描き方は、興味があれば自分で検索してみてください）。RGB 標準に基づく色空間は、人間の目が認識できるすべての色を完全にカバーすることは困難です。CIE 標準 (国際照明委員会によって開発された色を測定するための国際標準であり、人間の目の色の認識と色の測定方法を記述する) に基づく色空間には、理論的には人間が知覚できるすべての色が含まれます。ビジョン、カラー、

新しい CSS Color 4 標準では、CIE 標準色域のサポートも追加されています。以下で紹介する lab()、lch()、oklab()、oklch() はすべて CIE に基づいた新しい色選択方法です。

研究室()

lab()この方法では、人間の目に見える全色域をカバーできる CIE 標準に基づいて色空間内の色を記述します。RGB に基づいて色を記述するために使用される寸法とは異なり、ラボで使用される寸法は次のとおりです。

L: 明度、視覚的な線形グラデーションの明るさ、値の範囲はまたはです。0~1000%~100%
A: 人間の視覚特性により適した 2 つの色軸のうちの 1 つを表します: 赤と緑。値の範囲はまたはです。A が正の値の場合はより赤くなり、負の値の場合はより緑が強くなります。 -125~125-100%~100%
B: 人間の目の視覚特性により一致する 2 つの色軸のうち 2 番目の色軸、つまり青と黄を表し、値の範囲はまたはです。正の値は黄色が多くなり、負の値は青が多くなります。-125~125-100%~100%

.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);

  /* 后两个参数为none是可表示纯灰度 */
  --empty-channels-white:lab(100 none none);
  --empty-channels-black:lab(none none none);
}

lch()

lch で使用されるディメンションは次のとおりです。

L: 明度、視覚的な線形グラデーションの明るさ。値の範囲は 0 ～ 100 または 0% ～ 100% です。
C: 彩度、彩度に似た色の純度。値は 0 ～ 230 の範囲ですが、実際にはこの値に上限はありません。
H: 色相、色相は hsl や hwb と同様、角度軸であり、値の範囲は 0deg~360deg です。

.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);

  /* 后两个参数为none是可表示纯灰度 */
  --empty-channels-white:lch(100 none none);
  --empty-channels-black:lch(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);

  /* 后两个参数为none是可表示纯灰度 */
  --empty-channels-white:oklab(100 none none);
  --empty-channels-black:oklab(none none none);
}

oklch()

同様に、oklch は lch の修正版です。色選択のロジックは hsl と同様です。円形のカラーホイールで角度を選択して色相を選択し、明るさと純度、つまり彩度、純度を調整します。 hsl の彩度と彩度は基本的に同等と考えてよいが、唯一の違いは、純度の調整と明るさの調整が通常は同時に行われる点であり、そうでない場合、純度が目標の色域の範囲を簡単に超えてしまう可能性がある。ここでは、oklch カラーピッカーを試してみます。

.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);

  /* 后两个参数为none是可表示纯灰度 */
  --empty-channels-white:oklch(100 none none);
  --empty-channels-black:oklch(none none none);
}

カラーミックス()

いくつかの新しい色選択方法に加えて、新しい標準には、上記のさまざまな色空間で色を混合して新しい色を計算できる色混合機能もあります。

color-mix(in lch, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue,hsl(120 100% 50%) 20%, white);

メソッド定義: color-mix(method, color1[ p1], color2[ p2])

パラメータの方法: カラー混合の色空間を、<color space> 、 <color space>の形式で指定します。次のものが含まれます: 、、、、、、、、、、またはsrgbsrgb-linearlaboklabxyzxyz-d50xyz-d65hslhwblchoklch
パラメータ color1、color2: 対応するメソッドで指定された色空間内の任意の色。
パラメータ p1 と p2: はオプションのパラメータです。値の範囲は 0% ～ 100% で、色の混合の割合を示すことができます。空の場合、デフォルトの color1 と color2 はそれぞれ 50% です。

プロジェクトで HD カラーを使用する方法

新しい文法を適用するときは、通常、グレースフルデグラデーションとプログレッシブエンハンスメントという 2 つの戦略を使用します。具体的な実装計画は次のとおりです。

グレースフルダウングレード

これは比較的簡単に実装できます。つまり、新旧の色選択方法を同時に使用することで、ブラウザが表示する色を自動的に決定できるようになります。

/* 原代码 */
color: red;
color:color(display-p3 1 0 0);

/* 如果浏览器不支持display-p3，则会只解析第一行 */
color: red;

/* 如果浏览器支持，则会最终使用第二行 */
color:color(display-p3 1 0 0);

プログレッシブエンハンスメント

@supports と @media を使用して、まず現在のブラウザーが新しい色域標準をサポートしているかどうかを判断し、条件が許せば新しい色の値を指定します。

色域メディアクエリ

Dynamic-range : 現在のハードウェアデバイスが高解像度、高コントラスト、高色精度をサポートしているかどうかを判断するために使用される値は標準または高ですが、この属性の判断は比較的一般的であり、ブラウザがサポートしているかどうかを正確に判断することはできません。新しい色域と色空間です。

@media(dynamic-range: high){
  /* safe to use HD colors */
  color: color(display-p3 34% 58% 73%);
}

color-gamut : 値は srgb、p3、または rec2020 で、ユーザーデバイスが sRGB、Display P3、または REC2020 色域をサポートするかどうかを決定するために使用できます。

@media(color-gamut: srgb){
  /* safe to use srgb colors */
  color: #4499bb;
}

@media(color-gamut: p3){
  /* safe to use p3 colors */
  color: color(display-p3 34% 58% 73%);
}

@media(color-gamut: rec2020){
  /* safe to use rec2020 colors */
  color: color(rec2020 34% 58% 73%);
}

CSS メディアクエリを直接使用するだけでなく、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 */
  background:rgb(0 0 0);
}


@supports(background:color(display-p3 0 0 0)){
  /* display-p3 color space supported */
  background:color(display-p3 0 0 0);
}


@supports(background:oklch(0 0 0)){
  /* oklch color space supported */
  background:oklch(0 0 0);
}

アプリケーション

実際のアプリケーションでは、新旧規格間の移行期間中に、上記のクエリ方法を総合的に使用できます。以下に新旧規格に互換性のある例を示します。

:root{
  --neon-red:rgb(100% 0 0);
  --neon-blue:rgb(0 0 100%);
}

/* 设备是否支持展示高清 */
@media(dynamic-range: high){

  /* 浏览器是否能解析display-p3 */
  @supports(color:color(display-p3 0 0 0)){

    /* 安全使用display-p3 */
    --neon-red:color(display-p3 1 0 0);
    --neon-blue:color(display-p3 0 0 1);
  }
}

開発とデバッグ

Chrome ブラウザの最新バージョンを更新している場合は、DevTools のカラーピッカーが CSS Color 4 の新しい構文をすでにサポートしていることがわかります。ページ要素の color 属性をクリックします。ポップアップカラーピッカーで、中間カラー値右側の矢印。以前のバージョンでは、矢印をクリックすると hex、rgb、hsl、hwb が切り替わりました。しかし、新しいバージョンでは、矢印をクリックするとドロップダウンボックスが表示され、すべての色が表示されます。新しいカラースペースとメソッド、および現在のカラー値に対応する置換可能なカラー値。

同時に、別の色空間を選択すると、調整可能な色のパラメータもそれに応じて変更されます。

sRGBの色域にない色の値を選択すると、カラーピッカーの上部にsRGBの分割線が表示され、現在選択されている色の色域がはっきりとわかります。。これは、開発者が高解像度のカラーと非高解像度のカラーを区別するのに役立ちます。

sRGB 範囲外の色を選択し、色の値の右側にある矢印をクリックしてオプションリストをポップアップ表示すると、sRGB 色域内の色の値の後に三角形の感嘆符が表示されることがわかります。これは、現在の色の値が sRGB で表現できる範囲を超えており、類似した色は置換としてのみ使用できることを示しています。

Chrome DevTools の HD カラーに関する最新情報については、公式ドキュメントを参照してください。

要約する

Web では sRGB 以外の色域や色空間が始まったばかりですが、特に H5 アニメーション、ゲーム、3D 画像などでは、将来の設計や開発の要件が徐々に現れる可能性があり、カラー表示の要件は sRGB に留まらないでしょう。この簡単な紹介が、誰もが色について何かを理解し始めるのに役立つことを願っています。間違いや漏れがあれば修正して議論してください。

参考記事：

1. https://web.dev/articles/color-spaces-and-functions?hl=ja

2. https://developer.chrome.com/articles/high-definition-css-color-guide/

3. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color

著者: Jingdong Technology Zheng Li

出典：JD Cloud Developer Community 転載の際は出典を明記してください

CSS 色域、色空間、CSS Color 4 新標準 | JD Cloud テクニカルチーム

導入

基本概念

色域

色空間

HD カラーをサポートする理由

CSSカラー4

既存の色空間を見直す

16進数

RGB

HSL

ブースト

新しいメソッド color()

color() を使用してさまざまな色空間を記述する

sRGB

リニアsRGB

展示P3、Rec2020

CIE規格

研究室()

lch()

オクラボ()

oklch()

カラーミックス()

プロジェクトで HD カラーを使用する方法

グレースフルダウングレード

プログレッシブエンハンスメント

色域メディアクエリ

色空間クエリ

アプリケーション

開発とデバッグ

要約する

おすすめ

CSS 色域、色空間、CSS Color 4 新標準 | JD Cloud テクニカル チーム

導入

基本概念

色域

色空間

HD カラーをサポートする理由

CSSカラー4

既存の色空間を見直す

16進数

RGB

HSL

ブースト

新しいメソッド color()

color() を使用してさまざまな色空間を記述する

sRGB

リニアsRGB

展示P3、Rec2020

CIE規格

研究室()

lch()

オクラボ()

oklch()

カラーミックス()

プロジェクトで HD カラーを使用する方法

グレースフルダウングレード

プログレッシブエンハンスメント

色域メディアクエリ

色空間クエリ

アプリケーション

開発とデバッグ

要約する

おすすめ

CSS 色域、色空間、CSS Color 4 新標準 | JD Cloud テクニカルチーム