Funguo ya oklch ya CSS

kuelewa na kusababisha

Kwa CSS: oklch() Funguo inayotumika kusababisha rangi katika ukusababisha wa OKLCH.

oklch() Funguo inayotumika sana: inahitajika kufikiria kina ya kina (L) ya kawaida, uwezo wa mabaki (C), na rangi yenye uhusiano (H). Pia, unaweza kuchagua kuongeza chanzo cha kina cha kina (A), ambao inaeleza uharibifu wa rangi.

mimba

Kielewa kwa kufikiria oklch() Ruzuku:

/* Mawili ya kina ya mabaki /
#p1 {mbali mabaki ya mawili (30% 0.4 150);}
#p2 {mbali mabaki ya mawili (60% 0.4 150);}
#p3 {mbali mabaki ya mawili (100% 0.4 150);}
/ Rangi za kijani za tofauti /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ Rangi za kijani za tofauti /
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

Jifunze kwa mwenyewe

Makosa ya CSS

Makosa wa rangia ya kina

oklch(L C H / A)
Chaguo Maelezo
L

Inahitajika kuwa namba kati ya 0 hadi 1 au nafasi kati ya 0% hadi 100%.

0 (au 0%) inaeleza kijani, 1 (au 100%) inaeleza kijani.

Inaweza kutumia none (inaonekana kama 0%).
C

Inayotumika kwa lazima. Inaeleza rangia ya rangia (nia ya rangia), inaweza kuwa namba au nafasi.

Inahitajika kuwa namba kati ya -0.4 hadi 0.4 au nafasi kati ya -100% hadi 100%.

Wakati wa chini cha 0% (au -0.4), rangia inafikia nje ya kijani.

Inaweza kutumia none (inaonekana kama 0%).
H

Inayotumika kwa lazima. Inaeleza rangia cha rangia, inaweza kuwa namba au ukili (0 hadi 360).

Inaweza kutumia none (inaonekana kama 0deg).
/ A

Inayotumika kwa urahisi. Inaeleza chani cha kivivu cha rangia (0% (au 0) inaeleza kivivu kina chani cha kawaida, 100% (au 100) inaeleza kivivu cha kina kawaida).

Inaweza kutumia none (inaonyesha chani cha kawaida).

Chaguo cha kuzingatia ni 100%.

Makosa wa rangia ya kina

oklch(from color L C H / A)
Chaguo Maelezo
from color

Inaanza na herufi from, ikifuata na rangia ya rangia ya kina.

Hii ni rangia ya kina ambayo inatengeneza rangia ya kina ya kawaida.
L

Inahitajika kuwa namba kati ya 0 hadi 1 au nafasi kati ya 0% hadi 100%.

0 (au 0%) inaeleza kijani, 1 (au 100%) inaeleza kijani.

Inaweza kutumia none (inaonekana kama 0%).
C

Inayotumika kwa lazima. Inaeleza rangia ya rangia (nia ya rangia), inaweza kuwa namba au nafasi.

Inahitajika kuwa namba kati ya -0.4 hadi 0.4 au nafasi kati ya -100% hadi 100%.

Wakati wa chini cha 0% (au -0.4), rangia inafikia nje ya kijani.

Inaweza kutumia none (inaonekana kama 0%).
H

Inayotumika kwa lazima. Inaeleza rangia cha rangia, inaweza kuwa namba au ukili (0 hadi 360).

Inaweza kutumia none (inaonekana kama 0deg).
/ A

Inayotumika kwa urahisi. Inaeleza chani cha kivivu cha rangia (0% (au 0) inaeleza kivivu kina chani cha kawaida, 100% (au 100) inaeleza kivivu cha kina kawaida).

Inaweza kutumia none (inaonyesha chani cha kawaida). Chaguo cha kuzingatia ni 100%.

Maelezo ya tekhnolojia

Muundo: CSS Color Module Level 4

Mwongozo wa wasafiri

Mifano ya wasafiri inaeleza na kiwango cha kwanza cha wasafiri ambao wameongeza fungu hili

Chrome Edge Firefox Safari Opera
oklch()
111 111 113 15.4 97
Kuandaa namba na nafasi katika thamani
116 116 113 16.2 102

Makao ya kuelewa

Marejeo:Mafunzo ya rangi ya CSS

Marejeo:FaaCSS hsl() fungu

Marejeo:Faačo la hwb() cha CSS

Marejeo:Faačo la lab() cha CSS

Marejeo:Faačo la lch() cha CSS

Marejeo:Faačo la oklab() cha CSS