Oklab色空間

Standard color space with color-opponent values

OklabとOklch
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色空間
ドメイン	カラーモデル
ライセンス	パブリックドメイン
ウェブサイト	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]}

Ottosson氏が説明したように^[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との間の変換

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からの変換

標準光源D65を使用したCIE XYZからの変換は、以下の手順で行われます。^[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. 別の線形マップ $${\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カラーモデル」. Can I Use . 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"