oklch()
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.
oklch()
関数記法は、指定された色を Oklch 色空間で表現するものです。これは oklab()
と同じ L 軸を持っていますが、極座標系の C (彩度)と H (色相)を使用します。
構文
oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)
値
Functional notation: oklch(L C H[ / A])
L
-
<number>
で0
~1
の範囲、<percentage>
で0%
~100%
の範囲、またはキーワードnone
であり、 CIE の明るさを指定します。ここで数値0
は0%
(黒)に、数値1
は100%
(白)に対応します。 C
-
<number>
、<percentage>
、またはキーワード値none
であり、ここで0%
は0
に、100%
は数値0.4
に対応します。これは彩度の指標です(おおよそ「色の量」を表します)。その有効な最小値は0
で、最大値は理論的には無制限です(しかし実際には0.5
を超えることはありません)。 H
-
<number>
、<angle>
、またはキーワード値none
であり、色相角を表します。この型の詳細は、<hue>
のリファレンスにあります。 A
省略可-
<alpha-value>
またはキーワードnone
です。1
は100%
(完全に不透明)に対応します。
メモ: none
の効果については色成分の欠落を参照してください。
形式文法
例
明度、彩度、色相の調整
次の例は、関数記法 oklch()
の L
(明度)、C
(彩度)、H
(色相)の値を変化させたときの効果を示しています。
HTML
<div data-color="blue"></div>
<div data-color="blue-light"></div>
<div data-color="red"></div>
<div data-color="red-chroma"></div>
<div data-color="green"></div>
<div data-color="green-hue"></div>
CSS
[data-color="blue"] {
background-color: oklch(60% 0.4 240);
}
[data-color="blue-light"] {
background-color: oklch(90% 0.4 240);
}
[data-color="red"] {
background-color: oklch(100% 0.4 30);
}
[data-color="red-chroma"] {
background-color: oklch(100% 0.3 40);
}
[data-color="green"] {
background-color: oklch(60% 0.57 161);
}
[data-color="green-hue"] {
background-color: oklch(60% 0.57 181);
}
結果
色のアルファ値の調整
次の例は lab()
関数記法の A
(アルファ)値を変化させたときの効果を示しています。
red
と red-alpha
要素は #background-div
要素に重なり、透明度の効果を示しています。
A
に 0.4
の値を与えると、色は 40% の不透明度になります。
HTML
<div id="background-div">
<div data-color="red"></div>
<div data-color="red-alpha"></div>
</div>
CSS
[data-color="red"] {
background-color: oklch(50% 0.5 20);
}
[data-color="red-alpha"] {
background-color: oklch(50% 0.5 20 / 0.4);
}
結果
仕様書
Specification |
---|
CSS Color Module Level 5 # relative-Oklch |
CSS Color Module Level 4 # ok-lab |
ブラウザーの互換性
BCD tables only load in the browser