oklch()
CSS oklch() funksiyasi rangni OKLCH rang fazosida belgilaydi.
oklch() funksiyasi intuitiv tushunarli: siz ishlatiladigan yorug‘lik/yorqinlik miqdorini (L), tus intensivligini (kulranglik) (C) va rangning o‘zini (H) belgilaysiz. Bundan tashqari, rangning noshaffofligini bildiruvchi ixtiyoriy alfa kanali qiymati (A) ham mavjud.
Misol
Turli oklch() ranglarini belgilang:
/* green color with different amount of lightness */
#p1 {background-color:oklch(30% 0.4 150);}
#p2 {background-color:oklch(60% 0.4 150);}
#p3 {background-color:oklch(100% 0.4 150);}
/* yellow color with different amount of lightness */
#p4 {background-color:oklch(30% 0.4 100);}
#p5 {background-color:oklch(60% 0.4 100);}
#p6 {background-color:oklch(100% 0.4 100);}
/* red color with different amount of lightness */
#p7 {background-color:oklch(30% 0.4 20);}
#p8 {background-color:oklch(60% 0.4 20);}
#p9 {background-color:oklch(100% 0.4 20);}
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| oklch() | 111 | 111 | 113 | 15.4 | 97 |
| Parametrlarda son va % ni aralash ishlatish | 116 | 116 | 113 | 16.2 | 102 |
CSS sintaksisi
Mutlaq qiymat sintaksisi
oklch(L C H / A)
| Qiymat | Tavsif |
|---|---|
| L | Majburiy. Rangning idrok etiladigan yorug‘ligini 0 va 1 oralig‘idagi son yoki 0% va 100% oralig‘idagi foiz sifatida belgilaydi. 0 (yoki 0%) — qora, 1 (yoki 100%) — oq. None ham ishlatilishi mumkin (0% bilan bir xil) |
| C | Majburiy. Rangning xromasini (rang miqdorini) son yoki foiz sifatida belgilaydi. -0.4 va 0.4 oralig‘idagi son yoki -100% va 100% oralig‘idagi foiz bo‘lishi kerak. Minimal qiymatda (0% yoki -0.4) rang kulrangga yaqinroq bo‘ladi. None ham ishlatilishi mumkin (0% bilan bir xil) |
| H | Majburiy. Rangning o‘zini son yoki burchak sifatida belgilaydi (0 dan 360 gacha). None ham ishlatilishi mumkin (0deg bilan bir xil) |
| / A | Ixtiyoriy. Rangning alfa kanali qiymatini bildiradi (0% (yoki 0) — to‘liq shaffofdan 100% (yoki 100) — to‘liq noshaffofgacha). None ham ishlatilishi mumkin (alfa kanali yo‘qligini bildiradi). Standart qiymat: 100% |
Nisbiy qiymat sintaksisi
oklch(from color L C H / A)
| Qiymat | Tavsif |
|---|---|
| from color | from kalit so‘zi bilan boshlang, undan keyin asl rangni ifodalovchi color qiymati keladi. Bu nisbiy rang asoslanadigan asl rangdir |
| L | Majburiy. Rangning idrok etiladigan yorug‘ligini 0 va 1 oralig‘idagi son yoki 0% va 100% oralig‘idagi foiz sifatida belgilaydi. 0 (yoki 0%) — qora, 1 (yoki 100%) — oq. None ham ishlatilishi mumkin (0% bilan bir xil) |
| C | Majburiy. Rangning xromasini (rang miqdorini) son yoki foiz sifatida belgilaydi. -0.4 va 0.4 oralig‘idagi son yoki -100% va 100% oralig‘idagi foiz bo‘lishi kerak. Minimal qiymatda (0% yoki -0.4) rang kulrangga yaqinroq bo‘ladi. None ham ishlatilishi mumkin (0% bilan bir xil) |
| H | Majburiy. Rangning o‘zini son yoki burchak sifatida belgilaydi (0 dan 360 gacha). None ham ishlatilishi mumkin (0deg bilan bir xil) |
| / A | Ixtiyoriy. Rangning alfa kanali qiymatini bildiradi (0% (yoki 0) — to‘liq shaffofdan 100% (yoki 100) — to‘liq noshaffofgacha). None ham ishlatilishi mumkin (alfa kanali yo‘qligini bildiradi). Standart qiymat: 100% |
| Versiya: | CSS Color moduli, 4-daraja |
|---|
Tegishli sahifalar
CSS ma’lumotnomasi: CSS ranglari.
CSS ma’lumotnomasi: CSS hsl() funksiyasi.
CSS ma’lumotnomasi: CSS hwb() funksiyasi.
CSS ma’lumotnomasi: CSS lab() funksiyasi.
CSS ma’lumotnomasi: CSS lch() funksiyasi.
CSS ma’lumotnomasi: CSS oklab() funksiyasi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!