4つの新しいCSSカラー機能のプレビュー-CSSチュートリアル-php.cn

4つの新しいCSSカラー機能のプレビュー

この記事では、CSSカラーフィールドの最新の変更と、驚くべき量のコンテンツを使用して、将来の変化の可能性について説明します。色を定義するための新しく今後の方法は、既存のものよりもさらに大きい方法の数にあります。すぐに見てみましょう。

まず、これらの内容が非常に複雑であることを強調することが重要です。私は個人的に完全に理解するのが難しいと感じています。しかし、ここにいくつかの重要なポイントがあります：

今後のすべての変更が変更されるまで、RGBは色モデルとしてしかありません。すべてがそれに基づいています。
異なる「カラースペース」が異なります（たとえば、RGB（）関数はRGBカラーモデルを線形座標付きキューブにマップし、HSL（）関数はRGBカラーモデルをシリンダーにマップします）が、それらはすべてSRGBカラーガマットに属します。
今後の変更により、新しいカラーモデルが取得され、（！）その色モデルをさまざまな方法でマッピングする新しい関数が得られます。だから私はそれが二重またはトリプルブローだと思う。

私はあなたにすべての詳細を詳細に説明することはできません。私のような多くの人々が私たちがこれを気にするべき理由を知りたいと思っているので、私はこれを書いています。

Display-P3は、以前は表現できないより明るい色をオンにします。

体 {
  背景：色（ディスプレイ-P3 1 0.08 0）; */
}

ログイン後にコピー

最新のモニターはより多くの色、特に特に明るい色を表示できることがわかりますが、HEX、RGB、HSLなどのクラシックなCSSカラー構文を使用してこれらの色を定義する方法はありません。とても奇妙ですよね？！ただし、Display-P3を使用すると、これらの明るい色にもっと広くアクセスできます。

Development Company Panicはこれに早い段階で気づき、これらの色を「秘密兵器」として使用し始めました。

WebGLに加えて、P3の色はパニックウェブサイトの秘密兵器スタックの重要な部分になりました。 shh、誰にも言わないでください、あなたはiMac Pro画面でこのページを表示する必要があります！ https://www.php.cn/link/f08c64512c2ce6b9642b58563e9c029b

- パニック（@panic）2019年5月24日

ジェン・シモンズは、サポートされていないブラウザのフォールバックオプションを含む、それらの使用方法についても説明しています。

P3色を表示します。ブラウザで設計されています。素晴らしい。

P3に切り替え、色を見つけてから、古いブラウザのフォールバック色を見つけます。すべての操作は、Safari Web Inspectorで実行されます。（音を開けて私の説明を聞いてください！）pic.twitter.com/aakhrn2s3e

- ジェン・シモンズ（@jensimmons）2022年1月5日

リソース

display-p3（webkitブログ）を使用したcssワイドメイカットカラー
インターネット上の拡大し続ける色域（Ollie Williams）

HWBはより「人間」ですが、それは少し議論の余地があり、まだSRGBに基づいています。

HWB（）が何であるかを知りませんでした - ステファンジュディスのブログ投稿のおかげです。

私は通常、HSLを「人間化された」CSSカラー形式（およびプログラム制御に適している）と考えています。

しかし、HWB（）には色相があります（HSLと同じと思います）、そして白さと黒さがあります。ステファン：

色に白と黒を追加すると、飽和に影響します。同じ量の白と黒を色に追加すると仮定します。色調は同じままですが、色は飽和を失います。これは、最大50％の白と50％の黒（HWB（0DEG 50％50％））で機能し、非色の色になります。

ステファンは、これがHSLよりも理解しやすいかどうかを疑っており、私は同意する傾向があります。私はそれにもっと慣れる必要があるかもしれませんが、それは単に明るさや飽和を変えるよりも抽象的であるようです。

HWBは、すべての古いカラー形式と同じ色域（SRGB）に制限されています。ここには新しい色が解除されていません。

リソース

HWBカラーセレクター
hwb（） - 人間化されたカラー表記？（ステファンジュディス）

ラボは、より広い色の範囲を持つRGB（）のようなものです

div {
  背景：ラボ（150％-400400）;
}

ログイン後にコピー

私が周りに尋ねたとき、私はエリック・ポーティスのラボの説明が好きです：

ラボはRGBのようなもので、3つの線形コンポーネントがあります。数が低いほど、物事が少なくなり、数が大きくなるほど、物事が大きくなります。そのため、ラボを使用して、史上最も明るく緑の緑を指定できます。これは、誰にとっても非常に明るく緑になりますが、色域が広いモニターではより明るく緑になります。

そのため、すべての余分な色を取得しますが、これは素晴らしいことですが、SRGBには別の問題があります（限られた色の表現に加えて）。つまり、知覚的に統一されていません。ブライアン・カーデル：

SRGBスペースは知覚的に統一されていません。同じ数学的な動きは、色空間の異なる位置で知覚効果の程度が異なります。これでのデザイナーの経験について読みたい場合は、ここに、うまくやるために働くプロセスを示す興味深い例を示します。

ここでの古典的な例は、HSLでは、まったく同じ「明るさ」の色が実際に完全に異なると感じることです。

HSLとラボ::明るさ？

トリッキーな色投票から同じ色ですが、今回は同じ色のラボバージョンを見せました。ラボの輝度値が投票した結果にどれだけ近いかに注意してください！

すべてのカラースペースが同じではありません！ https://www.php.cn/link/ff15242553d87dd31723dcd88a087382 pic.twitter.com/xkeguq3kzg

- Adam Argyle（@Argyleink）2019年12月3日

しかし、研究室では明らかに知覚的に統一されています。つまり、色をプログラム的に操作することがより合理的な作業であることを意味します。別の利点は、ラボの色がデバイスに依存しないものとして指定されていることです。ミシェル・バーカー：

ラボとLCHは、仕様でデバイスに依存しない色として定義されています。ラボは、Photoshopなどのソフトウェアでアクセスできるカラースペースであり、画面上の色をTシャツに印刷した色と同じにしたい場合はお勧めします。

リソース

lab（）（mdn）
RGB、HSL、HWB、LAB、およびLCH（Michelle Barker）に最新のCSS色を使用するガイド

LCHは、より広い色の範囲を持つHSL（）のようなものです

RGBよりも理解しやすいので、HSLが「人間」だと言ったときのことを覚えていますか？色相、飽和、明るさを変えることは理にかなっています。 LCH（）これと同様に、明るさ、色素性、および色相があります。エリック・ポルティスとの会話に戻る：

LCHはHSLに似ています：極座標空間。 h = hue =円。だから、補完的な色（またはあなたが後にしているどんな変換）を選択するために数学をして些細なことになります（180を追加するだけです - または他の値！）

あなたがその構文が好きなからといってLCHを選択するだろうか、それがあなたがパフォーマンスを容易にしようとしている複雑なプログラム操作のいくつかを作るからです - そして、あなたはそれが色の50％以上を無料で表現することを知っています。

また、ここで知覚された統一を獲得します。 Lea Verouは、明るさが実際に理にかなっていることに興奮しているようです。

HSLでは、明るさは無意味です。色は同じ輝度値を持つことができますが、知覚された明るさは非常に異なります。 […] LCHでは、同じ明るさの色は同様に知覚的に明るく、同じ色の色の色は同様に知覚的に飽和しています。

新しいモデルのもう1つの利点は、CSSカラーグラデーションの「グレーデッドゾーン」を取り除くことができることです。この知覚的な統一のために、2つの豊かな色が奇妙にならず、豊かでない領域で徐々に自分自身を変えるとは思いません。

小さな個人的な予測は次のとおりです。LCH（）はデザイナーのお気に入りになるかもしれません。すぐに多くの新しいカラーオプションがあり、さまざまな色を選択するのは常に難しくて奇妙です。 LCHは最も心理的に効果的であるようです。

リソース

lch（）（mdn）
CSSのLCH色：何、なぜ、どのように？（Lea Verou）

"もちろん"

ラボとその友人は、CSSにとって新しいものであるため、とても斬新に見えます...しかし、ラボは1940年代に発明されました。アダム・アーガイルとの会話の中で、彼は記憶に残るフレーズを使用しています。すべての色の空間にはアキレスヒールがあります。つまり、彼らは物事が少し悪いです。 SRGBの場合、それは灰色のデッドゾーンの問題であり、限られた色の範囲です。ラボは優れていますが、確かに独自の弱点があります。たとえば、ラボの青から白い勾配は、紫色の領域をかなり不器用に通過します。

2020年12月、BjörnOttossonは、「ちょっと、新しい色のスペースが登場したばかりだ」と言い、オクラブが来ています。明らかに、CSSの意思決定者は、この色空間の価値が十分に高いほどoklab（）とoklch（）が正規化されていると考えています。彼らは通常より良いので気にするべきだと思いますが、私が言ったことを引用しないでください。

ディスプレイP3が色（）関数を使用しているのに、他の関数は使用されないのはなぜですか？

私は本当に知りません。 CSS Color（）関数は比較的新しいものだと思いますが、それがSafariがそもそもそれを入れた方法です。 Display P3が専用の機能を取得するかどうか、またはすべてがCSS Color（）、またはWhatの使用を開始する必要があるかどうかはわかりません。

 /*これはディスプレイp3*/
色（ディスプレイ-P3 1 0.08 0）;

/*しかし、これは機能しません*/
色（Oklch 42.1％0.192 328.6）;

/ *これを行う必要がありますか？‍♀️ */
Oklch（42.1％0.192 328.6）;

/ *ただし、勾配でカラースペースを使用できます... */
背景イメージ：線形勾配（
    右に
    オクルチで、
    LCH（50％100 100）、
    LCH（50％100 250）
  ）;

ログイン後にコピー

相対色の構文は非常に便利です。

「相対色の構文」と呼ばれる非常にクールな機能があり、基本的にCSSの色を別の形式に移動しながら解体できます。（明らかに）最も有名なCSS 160色の霧犬を持っていると仮定し、それをHSLに変換したいとします。

体 {
  背景：HSL（＃F06D06 HSLから）;
}

ログイン後にコピー

たぶんこれはすぐには機能しませんが、ちょっと、今ではアルファを追加できます！実際には、既存のヘックス色にアルファを適用する他の方法はないため、これは非常に重要です。

体 {
  背景：HSL（＃F06D06 HSL / 0.5から）;
}

ログイン後にコピー

しかし、私もそれを変更することができます。不透明度を追加する前に、霧の犬を少し飽和させたいとしましょう。不透明度が低くなると自然に暗くなるので、それを相殺したいと思います。そこで暗黙の変数でcalc（）を使用できます。

体 {
  背景：HSL（＃F06D06 H CALC（S 20％）L / 0.5から）;
}

ログイン後にコピー

これはとてもクールです。私たちはそれから何か素晴らしいものを見ると確信しています。確かにHSLに限定されません。 HSLを使用しているだけです。今は快適だと感じています。私が望むなら、私は名前のある色の赤から始めて、それをLCHで変更することができます：

体 {
  背景：LCH（レッドL Calc（C 15）H / 0.25から）;
}

ログイン後にコピー

これらは、カスタムプロパティと自由に組み合わせると便利です。

特にアルファ専用の特別な機能はありません。

CSSカラー関数にアルファ値にコンマがないことは明らかですが、前方のスラッシュ：

 /* 古い！ */
RGB（255、0、0）;
RGBA（255、0、0、0.5）;

/* 新しい！ */
RGB（255 0 0）;
RGB（255 0 0 / 0.5）;
HSL（0DEG 40％40％）
HSL（0DEG 40％40％ / 90％） /*は、0.9またはその他の値ではなくパーセンテージになります* /

/*新しいカラーコンテンツには、単一の基本関数のみがあり、アルファマイナー関数はありません*/
ラボ（49％39 80）
ラボ（49％39 80 / 0.25）

/*色関数を使用してP3を表示します。基本的にはフォワードスラッシュと同じ方法です*/
色（ディスプレイ-P3 1 0.08 0 / 0.25）;

ログイン後にコピー