CSS oklch() fonksiyonu

Tanımlama ve Kullanım

CSS'teki oklch() Fonksiyon, OKLCH renk alanında renk belirlemek için kullanılır.

oklch() Fonksiyon oldukça anlaşılır: Kullanacağınız parlaklık/parlaklık (L) miktarını, ton (gri) yoğunluğunu ve rengi (H) göz önünde bulundurmanız gerekiyor. Ayrıca, rengin şeffaflık kanal değerini (A) ekleyebilirsiniz, bu da rengin şeffaflığını belirtir.

Örnek

Farklı oklch() Renk:

/* Farklı parlaklıkta yeşil /
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ 不同亮度的黄色 /
/ Farklı parlamaların sarıları /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ Farklı parlamaların kırmızıları */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}

#p9 {background-color: oklch(100% 0.4 20);}

Deneyin

CSS dilimi

Mutlak değer dilimiBu, göreceli renklerin temel aldığı temel renktir. 0 (veya 0%) siyahı belirtir, 1 (veya 100%) beyazı belirtir. H / Aoklch(from
) Değer
Bu, göreceli renklerin temel aldığı temel renktir.

L

Gerekli. Renkin algılanan parlaması, 0 ila 1 arasında bir rakam veya 0% ila 100% arasında bir yüzde olabilir.

Ayrıca none (0%'ye eşittir) kullanılabilir.
0 (veya 0%) siyahı belirtir, 1 (veya 100%) beyazı belirtir.

C

Gerekli. Renk tonunu (renkin miktarını) tanımlar, rakam veya yüzde olabilir.

En küçük değer (0% veya -0.4) olduğunda, renk griye daha yakın olur.

Ayrıca none (0%'ye eşittir) kullanılabilir.
H

Gerekli. Renk tanımlar, rakam veya açı (0 ila 360 arasında) olabilir.

Ayrıca none (0 dereceye eşittir) kullanılabilir.
/ A

Opsiyonel. Renk şeffaflık kanal değerini belirtir (0% veya 0% tamamen şeffaf, 100% veya 100% tamamen şeffaf değil).

oklch(

Ayrıca none (şeffaflık kanalını belirtmek için) kullanılabilir.

Varsayılan değer %100'dür.

Göreceli değer dilimi from Bu, göreceli renklerin temel aldığı temel renktir. 0 (veya 0%) siyahı belirtir, 1 (veya 100%) beyazı belirtir. H / Aoklch(from
) Değer
Açıklama from

color

Anahtar kelime 'from' ile başlar, ardından temel rengi belirten renk değeri gelir.
Bu, göreceli renklerin temel aldığı temel renktir.

L

Gerekli. Renkin algılanan parlaması, 0 ila 1 arasında bir rakam veya 0% ila 100% arasında bir yüzde olabilir.

Ayrıca none (0%'ye eşittir) kullanılabilir.
0 (veya 0%) siyahı belirtir, 1 (veya 100%) beyazı belirtir.

C

Gerekli. Renk tonunu (renkin miktarını) tanımlar, rakam veya yüzde olabilir.

En küçük değer (0% veya -0.4) olduğunda, renk griye daha yakın olur.

Ayrıca none (0%'ye eşittir) kullanılabilir.
H

Gerekli. Renk tanımlar, rakam veya açı (0 ila 360 arasında) olabilir.

Ayrıca none (0 dereceye eşittir) kullanılabilir.
/ A

Opsiyonel. Renk şeffaflık kanal değerini belirtir (0% veya 0% tamamen şeffaf, 100% veya 100% tamamen şeffaf değil).

Ayrıca none (şeffaflık kanalını belirtmek için) kullanılabilir. Varsayılan değer %100'dür.

Teknik ayrıntılar

Sürüm: CSS Color Module Level 4

Tarayıcı desteği

Tabloda gösterilen rakamlar, bu fonksiyonu tamamen destekleyen ilk tarayıcı sürümünü belirtir.

Chrome Edge Firefox Safari Opera
oklch()
111 111 113 15.4 97
Parametrelerde rakamlar ve yüzdelik değerlerin karıştırılması
116 116 113 16.2 102

İlgili sayfalar

Referans:CSS Renkleri

Referans:CSS hsl() fonksiyonu

Referans:CSS hwb() fonksiyonu

Referans:CSS lab() fonksiyonu

Referans:CSS lch() fonksiyonu

Referans:CSS oklab() fonksiyonu