Oklab色空間

Standard color space with color-opponent values

オクラブとオクルチ
HSV空間で一定値で生成されたグラデーションの不規則な知覚明度（明るい黄色と暗い青）と、Oklchで一定明度で生成されたグラデーションの比較
状態	勧告草案
初版	2020年12月23日[1] (2020-12-23)
最新バージョン	2024年2月13日[2] (2024-02-13)
プレビュー版	2024年2月29日[3] (2024-02-29)
組織	W3C
委員会	CSSワーキンググループ
シリーズ	CSSカラー
前任者	CIELAB色空間
ドメイン	カラーモデル
ライセンス	パブリックドメイン
Webサイト	www.w3.org

Oklab色空間は、数値的安定性と実装の容易さを確保しながら、知覚的均一性、色相と明度の予測、色の混合、^[a]と使いやすさを向上させるように設計された、デバイスに依存しない色の均一な色空間です。^[1] 2020年12月にBjörn Ottossonによって導入されたOklabとその円筒形対応物であるOklchは、 2021年12月からデバイスに依存しないウェブカラーのCSSカラーレベル4およびレベル5のドラフトに含まれています。^{[2] [3]}これらは、主要なウェブブラウザの最近のバージョンでサポートされており^{[6] 、}広色域のP3カラーの指定が可能です。^[7]

Oklabのモデルは、改良された色の見え方データ（明度と彩度についてはCAM16データ、色相についてはIPTデータ）を用いてフィッティングされています。この新しいフィッティングは、CIELAB色空間における青色の予期せぬ色相と明度の変化といった問題に対処し、配色の作成を簡素化し、より滑らかな色グラデーションを実現します。^{[1] [7] [4]}

オットソン氏が説明したように^[1] 、このモデルはOK（適切）な仕事をし、3つの色空間座標L、a、bに基づいているため、 Oklabという名前を選択しました。

座標

Oklchカラーホイール

Oklab は CIELAB と同じ空間構造を使用し、3 つのコンポーネントを使用して色を表します。

• Lは知覚明度で、0（純黒）から1（無彩色の場合は基準白）の範囲で、パーセンテージで表されることが多い。
• aとbは4つの固有の色相の反対チャネルであり、制限はないが、実際には-0.5から+0.5の範囲である。CSSは両方に±100%から±0.4を割り当てている^[2]
  • 緑（マイナス）から赤（プラス）の場合はa
  • bは青（マイナス）から黄色（プラス）

CIELChと同様に、Oklch は次のものを使用して色を表します。

• Lは知覚的な明るさを表す
• Cは彩度を表し、0（無彩色）から始まり、上限はないが、実際には+0.5を超えない。CSSでは+0.4を100%として扱う^[2]
• hは色相環の色相角で、通常は十進度で表されます。

無彩色

ニュートラルグレー、純黒、基準白は無彩色であり、つまり、、、、hは未定義です。これらの色相成分に実数値を割り当てても、色空間間の変換には影響しません。[ ^2] ${\displaystyle C=0}$ ${\displaystyle a=0}$ ${\displaystyle b=0}$

色の違い

Oklabにおける知覚色差は、 （L、a、b）座標間のユークリッド距離として計算される。^{[8] [2]}

色空間間の変換

Oklch への変換と Oklch からの変換

CIELCh と同様に、直交座標 aとbは次のように極座標 Cとhに変換されます。また、極座標は次のように直交座標に変換されます。 $${\displaystyle {\begin{aligned}C&={\sqrt {a^{2}+b^{2}}},\\h&=\operatorname {atan2} (b,a),\end{aligned}}}$$ $${\displaystyle {\begin{aligned}a&=C\cos h,\\b&=C\sin h.\end{aligned}}}$$

CIE XYZからの変換

CIE XYZから標準光源D65への変換は以下の手順で行う：^[1]

1. XYZ値をLMS色空間に類似した空間に変換する線形マップを適用する：^[b] $${\displaystyle {\begin{bmatrix}l\\m\\s\end{bmatrix}}=\mathbf {M} _{1}{\begin{bmatrix}X\\Y\\Z\end{bmatrix}}.}$$
2. 立方根 非線形性の適用： $${\displaystyle {\begin{bmatrix}l'\\m'\\s'\end{bmatrix}}={\begin{bmatrix}l^{1/3}\\m^{1/3}\\s^{1/3}\end{bmatrix}}.}$$
3. 別の線形マップを使用して Oklab に変換します。 $${\displaystyle {\begin{bmatrix}L\\a\\b\end{bmatrix}}=\mathbf {M} _{2}{\begin{bmatrix}l'\\m'\\s'\end{bmatrix}}.}$$

線形写像行列は $${\displaystyle {\begin{aligned}\mathbf {M} _{1}&={\begin{bmatrix}0.8189330101&{\phantom {-}}0.3618667424&-0.1288597137\\0.0329845436&{\phantom {-}}0.9293118715&{\phantom {-}}0.0361456387\\0.0482003018&{\phantom {-}}0.2643662691&{\phantom {-}}0.6338517070\end{bmatrix}},\\\mathbf {M} _{2}&={\begin{bmatrix}0.2104542553&{\phantom {-}}0.7936177850&-0.0040720468\\1.9779984951&-2.4285922050&{\phantom {-}}0.4505937099\\0.0259040371&{\phantom {-}}0.7827717662&-0.8086757660\end{bmatrix}}.\end{aligned}}}$$

sRGBからの変換

知覚色空間内の位置への線形色値のマッピングの視覚化

sRGBから変換するには、まず標準光源D65を用いてsRGBからCIE XYZに変換する必要があります。この変換の最終ステップは線形RGBからCIE XYZへの線形写像であるため、リファレンス実装では、2つの線形写像の合成を表す乗算行列を直接使用します。 ^[1] $${\displaystyle {\begin{bmatrix}l\\m\\s\end{bmatrix}}={\begin{bmatrix}0.4122214708&0.5363325363&0.0514459929\\0.2119034982&0.6806995451&0.1073969566\\0.0883024619&0.2817188376&0.6299787005\end{bmatrix}}{\begin{bmatrix}R_{\text{linear}}\\G_{\text{linear}}\\B_{\text{linear}}\end{bmatrix}}.}$$

CIE XYZとsRGBへの変換

CIE XYZとsRGBへの変換は、それぞれの逆関数を逆の順序で適用するだけです。^[1] $${\displaystyle {\begin{aligned}{\begin{bmatrix}l'\\m'\\s'\end{bmatrix}}&=\mathbf {M} _{2}^{-1}{\begin{bmatrix}L\\a\\b\end{bmatrix}},\\{\begin{bmatrix}l\\m\\s\end{bmatrix}}&={\begin{bmatrix}(l')^{3}\\(m')^{3}\\(s')^{3}\end{bmatrix}},\\{\begin{bmatrix}X\\Y\\Z\end{bmatrix}}&=\mathbf {M} _{1}^{-1}{\begin{bmatrix}l\\m\\s\end{bmatrix}}.\end{aligned}}}$$

注記

1. 画像のブレンドや処理には適しておらず、ガンマ拡張線形RGB色空間の方が適しています。^{[4] [5]}
2. ここで使用される( l , m , s ) 空間は、 LMS カラー スペースと同じではなく、カラー アピアランス データに最も適合するように数値的に検出された任意の空間です。

参考文献

1. Ottosson, Björn (2020年12月23日). 「画像処理のための知覚的色空間」. GitHub Pages . 2024年7月24日閲覧。
2. CSS カラーモジュール レベル 4 (勧告候補草案). W3C . 2024年7月24日閲覧。
3. CSS カラーモジュール レベル 5 (ワーキングドラフト). W3C . 2024年7月25日閲覧。
4. Levien, Raph (2021年1月18日). 「Oklabのインタラクティブレビュー」. GitHub Pages . 2024年7月24日閲覧。
5. Novak, John (2016年9月21日). 「すべてのコーダーがガンマについて知っておくべきこと」 . 2024年7月26日閲覧。
6. 「Oklabカラーモデル」。使用することはできますか？ 2024年7月24日閲覧。
7. Sitnik, Andrey; Turner, Travis (2023年1月25日). 「CSSにおけるOKLCH：RGBとHSLから移行した理由」. Evil Martians . 2024年7月24日閲覧。
8. Lilley, Chris (2021年7月). 「Labよりも優れている？CIE LabとOKLabによる色域縮小」W3C . 2024年7月24日閲覧。

外部リンク

• OKLCH カラーピッカー & コンバーター（Andrey Sitnik & Roman Shamin 作）

Retrieved from "https://en.wikipedia.org/w/index.php?title=Oklab_color_space&oldid=1321511171"