oklch()
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年5月.
* Some parts of this feature may have varying levels of support.
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()> =
oklch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<hue> =
<number> |
<angle>
<alpha-value> =
<number> |
<percentage>
例
明度、彩度、色相の調整
次の例は、関数記法 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 |