oklab()

Baseline 2023

Newly available

Since May 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

oklab() 関数記法は、指定された色を、人間の目による色の知覚方法を模倣しようとする Oklab 色空間で表現する。この oklab() は Oklab 色空間上の同次座標系、 a 軸と b 軸で動作します。極座標系、彩度、色相が必要な場合は、 oklch() を使用してください。

Oklab は知覚的色空間で、次のような場合に使用されます。

画像の明度を変えずに、グレースケールに変換する。
ユーザーが感じる色相や明度を維持したまま、色の彩度を変更することができる。
色の滑らかで均一なグラデーションを作成する。例えば、 <canvas> 要素で手動で補間した場合。

oklab() 関数は、Oklab 色空間から、RGB よりも広い、広色域や P3 色を含む任意の色を表現することができます。

構文

css

oklab(40.1% 0.1143 0.045);
oklab(59.69% 0.1007 0.1191);
oklab(59.69% 0.1007 0.1191 / 0.5);

値

関数記法: oklab(L a b[ / A])

L: <number> で 0 ～ 1 の範囲、 <percentage> で 0% ～ 100% の範囲、またはキーワード none であり、 CIE の明るさを指定します。ここで数値 0 は 0% （黒）に、数値 100 は 100% （白）に対応します。
a: <number> で -0.4 ～ 0.4 の範囲、 <percentage> で -100% ～ 100% の範囲、またはキーワード none であり、 Oklab 色空間における a 軸上の距離（緑と赤の色合い）を指定します。
b: <number> で -0.4 ～ 0.4 の範囲、 <percentage> で -100% ～ 100% の範囲、またはキーワード none であり、 Oklab 色空間における b 軸上の距離（青と黄の色合い）を指定します。
A 省略可: <alpha-value> またはキーワード none です。 1 は 100% （完全に不透明）に対応します。

メモ: none の効果については色成分の欠落を参照してください。

形式文法

<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<alpha-value> = 
  <number>      |
  <percentage>

例

明るさと色の軸を oklab() で調整

次の例は、 oklab() 関数の明度、 a 軸、 b 軸の値を変化させたときの効果を示しています。

HTML

html

<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red"></div>
<div data-color="red-a"></div>

<div data-color="green"></div>
<div data-color="green-b"></div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

css

[data-color="blue"] {
  background-color: oklab(0.5 -0.3 -0.4);
}
[data-color="blue-light"] {
  background-color: oklab(0.7 -0.3 -0.4);
}

[data-color="red"] {
  background-color: oklab(100% 0.4 0.4);
}
[data-color="red-a"] {
  background-color: oklab(100% 0.2 0.4);
}

[data-color="green"] {
  background-color: oklab(100% -100% 0.4);
}
[data-color="green-b"] {
  background-color: oklab(100% -100% 0.6);
}

結果

透明度を oklab() で調整

次の例は oklab() 関数記法の A（アルファ）値を変化させたときの効果を示しています。 red と red-alpha 要素は #background-div 要素に重なり、透明度の効果を示しています。 A に 0.4 の値を与えると、色は 40% の不透明度になります。

HTML

html

<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: lightblue;
  width: 150px;
  height: 40px;
}

css

[data-color="red"] {
  background-color: oklab(0.628 0.225 0.126);
}
[data-color="red-alpha"] {
  background-color: oklab(0.628 0.225 0.126 / 0.4);
}

結果

仕様書

Specification
CSS Color Module Level 5 # relative-Oklab
CSS Color Module Level 4 # ok-lab

ブラウザーの互換性

BCD tables only load in the browser