コメントのリクエスト: カラ ースペース

CSSの色指定には、最近多くの exciting な作業があり、ブラウザに実装されるようになると、サッシでもサポートを追加する準備をしてきました。その最初の大きな部分は、サッシにカラースペースのサポートを追加することであり、これは、色の 仕組みについての大規模な (しかし、大部分が下位互換性のある) 再考を表します。

これまでのところ、CSS のすべての色は、「sRGB」として知られる同じカラー空間内にありました。16進コード、hsl()関数、または色名として表現するかに関係なく、それらは画面に表示するように指示できる視覚的な色の同じセットを表していました。概念的には簡単ですが、いくつかの大きな 欠点があります

• 時間の経過とともにモニターが改善されるにつれて、sRGB 色 空間に表現できるよりも多くの色を表示できるようになりました。

• sRGB は、hsl()経由で使用する場合でも、人間が色を認識する方法とはほとんど一致しません。シアンは、同じ彩度と明度の 値でパープルより明らかに濃く見えます。

• プリンターで使用されるCMYKカラー空間など、ドメインまたはデバイス固有のカラー空間を表す方法はありません。

カラースペースは、これらの問題をすべて解決します。すべての色が、赤、緑、青のチャネルを持っているわけではありません (色相、彩度、明度として解釈できます)。代わりに、すべての色は、どのチャネルを持っているかを指定する特定のカラースペースを持っています。たとえば、色 oklch(80% 50% 90deg) は、カラースペースとして oklch、明度 80%、彩度 50%、色相 90deg を持っています。

Sass のカラースペースSass のカラースペース パーマリンク

本日は、Sass でカラースペースを処理する方法の提案を発表します。Sass の色値をカラースペースをサポートするように拡張することに加えて、この提案では、CSS Color レベル 4のすべての色の関数に対する Sassified バージョンを定義しています。

経験則経験則 パーマリンク

Sass のカラースペースで作業するための経験則はいくつかあります。

• rgb、hsl、hwb スペースは「レガシー スペース」とみなされ、下位互換性の向上を目的として、多くの場合、特別な処理が適用されます。16 進表記法またはCSS色名を使用して定義された色は、rgbカラースペースの一部であるとみなされます。レガシーカラーは、最も互換性のある形式で発行されます。これは、CSS 自体の後方互換 動作と一致します。

• それ以外の場合、特定のスペースで定義されたあらゆる色は、そのスペースに残り、その スペースで発行されます。

• 作者は、color.to-space()を使用して、色のスペースを明示的に変換できます。これは、非レガシー空間に変換することで非レガシー動作を強制したり、発行する前に色を出力をレガシー空間に変換することで、古いブラウザと色の出力が互換性があるようにしたりする場合に役立ちます 

• srgbカラースペースは、一方のレガシー空間にあり、もう一方のレガシーではないという点を除いて、rgb に相当します。また、0～255 の範囲を受け入れる rgb() と、0～ 1 の範囲を使用する srgb と、異なる座標システムを使用しています。 

• 操作用の色空間を指定できるカラー関数は、常にソースの色空間をデフォルトで使用します。操作用に明示的な空間が指定された場合、結果としての色は元の色の空間と同じ空間で返されます。color.mix() の場合、最初の色パラメーターが元の  色と見なされます。

• すべてのレガシーおよび RGB スタイル空間は、制限された色域を表します。色を色域にマップすることはロスが発生する処理なので、ディスプレイの機能に基づいて必要に応じて色をマップできるブラウザーに任せるべきです。このため、Sass では、色域の範囲を超えたチャネル値は、可能な限り維持されます。ただし、hsl および hwb 色空間では、色域の範囲を超えた色を表すことができないため、それらの空間に色を変換すると、範囲内に収まるように色域マップが適用されます。また、作成者は color.to-gamut() 関数を使用して、明示的に色域マッピングを実行することもできます。

• 古いブラウザーでは、srgb 色域内の色が必要です。ただし、最近のディスプレイのほとんどは、より広い display-p3 色域をサポートしています。

標準の CSS カラー関数標準の CSS カラー関数 パーマリンク

oklab() および oklch()oklab() および oklch() パーマリンク

oklab() (立体) 関数および oklch() (円柱) 関数は、知覚的に均一な空間内の無制限の色域に対してアクセスを提供します。作成者は、これらの関数を使用して、確実に均一な色を定義できます。たとえば、次の色は、明るさと 彩度において知覚的に似ています。

$pink: oklch(64% 0.196 353); // hsl(329.8 70.29% 58.75%)
$blue: oklch(64% 0.196 253); // hsl(207.4 99.22% 50.69%)

oklch() フォーマットは、一貫性のある「明度」と「彩度」を使用しますが、hsl() フォーマットは、「明度」と「彩度」の両方で劇的な変化を示します。そのため、oklch は一貫性のある 変換を行う場合、多くの場合最善の空間です。

lab() および lch()lab() および lch() パーマリンク

lab() 関数と lch() 関数は、知覚的に均一さは劣りますが、OKLab や OKLCH より普及している空間内の無制限の色域にアクセスを提供します。

hwb()hwb() パーマリンク

Sass は、CSS の組み込みの hwb() 構文と同じ構文を使用するトップレベルの hwb() 関数をサポートするようになりました。

color()color() パーマリンク

新しい color() 関数は、いくつかの特殊な空間にアクセスを提供します。特筆すべきは、display-p3 は広色域モニターで一般的な空間であり、より広い色域にアクセスしたい作成者にとって最も人気のある選択肢の 1 つになる可能性が高くなります。たとえば、P3 グリーンは、 sRGB で利用可能なグリーンよりもはるかに「明るく」彩度が高くなっています。

$fallback-green: rgb(0% 100% 0%);
$brighter-green: color(display-p3 0 1 0);

Sass は、Colors レベル 4 仕様で宣言された定義済みのすべての色空間をネイティブにサポートします。また、未知の色空間もサポートしますが、これらの色空間を他の色 空間に変換したり、他の色空間から変換したりすることはできません。

新しい Sass カラー関数新しい Sass カラー関数 パーマリンク

color.channel()color.channel() パーマリンク

この関数は色の単一チャネルの値を返します。デフォルトでは、色の独自のスペースで利用可能なチャネルのみをサポートしますが、$space パラメータを渡すことで、指定されたスペースに変換後のチャネルの値を返すことができます。

$brand: hsl(0 100% 25.1%);

// result: 25.1%
$hsl-lightness: color.channel($brand, "lightness");

// result: 37.67%
$oklch-lightness: color.channel($brand, "lightness", $space: oklch);

color.space()color.space() パーマリンク

この関数は色のスペースの名前を返します。

// result: hsl
$hsl-space: color.space(hsl(0 100% 25.1%));

// result: oklch
$oklch-space: color.space(oklch(37.7% 38.75% 29.23deg));

color.is-in-gamut(), color.is-legacy()color.is-in-gamut(), color.is-legacy() パーマリンク

これらの関数は色に関するさまざまな事実を返します。 color.is-in-gamut() は、色がその色空間に適合しているかどうかを返します（rgb(300 0 0) のように、1 つ以上のチャネルが範囲外になっている場合と対照的です）。 color.is-legacy() は、色が rgb、hsl、または hwb 色空間のレガシーカラーかどうかを返します。

color.is-powerless()color.is-powerless() パーマリンク

この関数は、指定されたチャネルが指定された色において「無力」かどうかを返します。これは特別な状態であり、個々の色空間に定義されており、チャネルの値が色の表示方法に影響しないことを示します。

$grey: hsl(0 0% 60%);

// result: true, because saturation is 0
$hue-powerless: color.is-powerless($grey, "hue");

// result: false
$hue-powerless: color.is-powerless($grey, "lightness");

color.same()color.same() パーマリンク

この関数は、2 つの色が異なる非レガシー空間での変換が必要であっても、同じように表示されるかどうかを返します。これは、常に異なる非レガシー空間の色を不等とみなす == 演算子とは異なります。

$orange-rgb: #ff5f00;
$orange-oklch: oklch(68.72% 20.966858279% 41.4189852913deg);

// result: false
$equal: $orange-rgb == $orange-oklch;

// result: true
$same: color.same($orange-rgb, $orange-oklch);

既存の Sass カラー関数既存の Sass カラー関数 パーマリンク

color.scale()、color.adjust()、および color.change()color.scale(), color.adjust(), and color.change() パーマリンク

デフォルトでは、すべての Sass カラー変換は元のカラーパラメータの色空間で処理および返されます。ただし、関連するすべての関数は現在、変換用の明示的な色空間の指定を許可しています。たとえば、明度と暗度の調整は oklch で最も信頼できます。

$brand: hsl(0 100% 25.1%);

// result: hsl(0 100% 43.8%)
$hsl-lightness: color.scale($brand, $lightness: 25%);

// result: hsl(5.76 56% 45.4%)
$oklch-lightness: color.scale($brand, $lightness: 25%, $space: oklch);

調整が別のスペースで実行された場合でも、返された色は元のカラースペースで引き続き出力されることに注意してください。

color.mix()color.mix() パーマリンク

color.mix() 関数はレガシーカラースペースでは既存の動作を保持しますが、新しいカラースペースではCSSの「カラー補間」仕様と一致します。これはCSSが、グラデーションやアニメーションの2色の間にどの色を使用するかを計算する方法です。

非推奨非推奨 パーマリンク

既存の関数の多くはレガシーカラーにのみ意味があり、そのため color.channel() や color.adjust() などのカラースペースに適した関数に置き換えられます。

• color.red()
• color.green()
• color.blue()
• color.hue()
• color.saturation()
• color.lightness()
• color.whiteness()
• color.blackness()
• adjust-hue()
• saturate()
• desaturate()
• transparentize()/fade-out()
• opacify()/fade-in()
• lighten()/darken()

ご意見をお聞かせください。ご意見をお聞かせください。 パーマリンク

この提案はまだ詳細については未定であり、確定したものはありません。みなさまからのフィードバックをお待ちしています。詳細については GitHub でお読みいただき、ご意見や懸念事項については 問題を提出 してください。.