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 （色相）を使用します。

構文

css
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

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

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

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

CSS

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

関連情報