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（等同于 0deg）。
/ 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（等同于 0deg）。
/ A

可选。表示颜色的透明度通道值（0%（或 0）表示完全透明，100%（或 100）表示完全不透明）。

也可以使用 none（表示无透明度通道）。默认值为 100%。

နည်းပါး အချက်

ပုံစံ: CSS Color Module Level 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() အကိုးအချုပ်