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()> =
oklch( [ <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 |
ブラウザーの互換性
Loading…