0

エンコード結果

Oklab カラー

Oklabカラーについて

Oklabカラーは、明度と2つの色成分で色を表す知覚ベースのカラースペースです。Labカラーと同じように明るさと色味を分けて表しますが、より新しいモデルとして、色の変化が見た目に近くなるように設計されています。

成分意味値の例
L: 明度 (Lightness)色の明るさを表します。0% は黒、100% は白です。60%
a緑から赤の方向を表します。負の値は緑寄り、正の値は赤寄りです。0.1
b青から黄の方向を表します。負の値は青寄り、正の値は黄寄りです。0.1

例えば、赤などの主要な色は以下のように表せます。

色Oklab表記RGB表記
赤oklab(62.8% 0.2249 0.1258)rgb(255 0 0)
緑oklab(51.98% -0.1403 0.1077)rgb(0 128 0)
ライムoklab(86.64% -0.2339 0.1795)rgb(0 255 0)
青oklab(45.2% -0.0325 -0.3115)rgb(0 0 255)
白oklab(100% 0 0)rgb(255 255 255)
黒oklab(0% 0 0)rgb(0 0 0)

透明度を含める場合は、アルファ値を追加します。例えば、半透明の赤は oklab(62.8% 0.2249 0.1258 / 0.5) のように表せます。

明度・a・bの扱い

明度は 0% から 100% の範囲で扱います。0% 未満の明度は 0%、100% を超える明度は 100% に収まるように扱います。

a と b は正または負の数値で指定します。a と b の値は固定範囲に切り詰めず、指定された値をそのままOklab成分として扱います。

OklabとOklchの違い

Oklabは a と b の直交座標で色を表します。一方、OklchはOklabと同じ知覚ベースの考え方を使いながら、色味を彩度 (Chroma) と色相 (Hue) で表すカラースペースです。

OklabとLabの違い

OklabはLabよりも、色相や彩度を変えたときの見た目の変化が均一に近くなるように設計されています。明度と色味の成分が人間の知覚に近い関係になるように調整されているため、成分値を同じ量だけ変えたときの見た目の変化も比較的そろいやすくなります。例えば、色を補間してグラデーションを作る場合や、彩度だけを上げ下げする場合に、明るさや色相が不自然にずれにくいことが特徴です。