CSS oklch() 関数

定義と使用方法

CSSでの oklch() 関数はOKLCH色彩空間で色を指定するために使用されます。

oklch() 関数は非常に直感的です：使用する明度/明るさ（L）の量、グレーの強度（C）、および色自体（H）を考慮する必要があります。また、透明度チャンネル値（A）を追加して、色の不透明度を指定することもできます。

例

定義する oklch() 色：

/* 異なる明度の緑色 */
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ 異なる明度の黄色 /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ 異なる明度の赤 */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

実際に試してみてください

CSS 構文

絶対値の構文

oklch(L C H / A)
値 説明
L

必須。色の感知明度を定義します。0から1までの数字または0%から100%までのパーセンテージができます。

0（または0%）は黒を、1（または100%）は白を示します。

none（0%に等しい）を使用することもできます。
C

必須。色の色度（色の量）を定義します。数字またはパーセンテージができます。

-0.4から0.4までの数字または-100%から100%までのパーセンテージでなければなりません。

最小値（0%または-0.4）では、色はグレーに近づきます。

none（0%に等しい）を使用することもできます。
H

必須。色自体を定義します。数字または角度（0 から 360）ができます。

none（0度に等しい）を使用することもできます。
/ A

オプション。色の透明度チャネルの値（0%（または 0）は完全に透明、100%（または 100）は完全不透明を示します）。

none（透明度チャネルを示す）を使用することもできます。

デフォルト値は 100% です。

相対値の構文

oklch(from color L C H / A)
値 説明
from color

キーワード from で始まり、元の色を示す色値が続きます。

これは相対色が基づく元の色です。
L

必須。色の感知明度を定義します。0から1までの数字または0%から100%までのパーセンテージができます。

0（または0%）は黒を、1（または100%）は白を示します。

none（0%に等しい）を使用することもできます。
C

必須。色の色度（色の量）を定義します。数字またはパーセンテージができます。

-0.4から0.4までの数字または-100%から100%までのパーセンテージでなければなりません。

最小値（0%または-0.4）では、色はグレーに近づきます。

none（0%に等しい）を使用することもできます。
H

必須。色自体を定義します。数字または角度（0 から 360）ができます。

none（0度に等しい）を使用することもできます。
/ A

オプション。色の透明度チャネルの値（0%（または 0）は完全に透明、100%（または 100）は完全不透明を示します）。

none（透明度チャネルを示す）を使用することもできます。デフォルト値は 100% です。

技術的詳細

バージョン： CSS Color Module レベル 4

ブラウザのサポート

テーブルの数字は、この関数を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
oklch()
111 111 113 15.4 97
パラメータ内で数字とパーセンテージを混在して使用
116 116 113 16.2 102

関連ページ

参考：CSS カラー

参考：CSS hsl() 関数

参考：CSS hwb() 函数

参考：CSS lab() 函数

参考：CSS lch() 函数

参考：CSS oklab() 函数