CSS oklab() fonksiyonu

tanımı ve kullanımı

CSS'nin oklab() fonksiyonları, OKLAB renk alanında renk belirlemek için kullanılır. Bu renk alanı, insan gözünün renk algısını simüle etmeyi amaçlamaktadır.

örnekleri

Farklı oklab() Renk:

#p1 {background-color:oklab(0 40% 20% / 0.5);}
#p2 {background-color:oklab(0.3 -40% -20%);}
#p3 {background-color:oklab(0.4 30% -20% / 20%);}
#p4 {background-color:oklab(0.5 60% 20%);}
#p5 {background-color:oklab(0.6 50% -10%);}
#p6 {background-color:oklab(0.7 70% -80% / 0.3);}
#p7 {background-color:oklab(0.8 70% 20% / 0.5);}
#p8 {background-color:oklab(0.9 80% -20%);}
#p9 {background-color:oklab(1 90% -100%);}

Deneyin

CSS dilimi

Absolüt değer dilimi

oklab(L a b / A)
Değer Açıklama
L

Gerekli. Renkin algılanan parlaklığını tanımlar, 0 ila 1 arasındaki sayı veya 0% ila 100% arasındaki yüzdelik olabilir.

0 (veya 0%) siyah, 1 (veya 100%) beyaz anlamına gelir.

Ayrıca None (0% eşdeğeridir) kullanılabilir.
a

Gerekli. -0.4 ile 0.4 arasındaki sayı veya -100% ile 100% arasındaki yüzdelik olarak tanımlanır.

Renk a eksenine olan mesafeyi tanımlar, renkin kırmızı-yeşil derecesini belirtir.

-0.4 yeşil, 0.4 kırmızı anlamına gelir. Ayrıca none (0% eşdeğeridir) kullanılabilir.
b

Gerekli. -0.4 ile 0.4 arasındaki sayı veya -100% ile 100% arasındaki yüzdelik olarak tanımlanır.

Renk b eksenine olan mesafeyi tanımlar, renkin sarı-mavi derecesini belirtir.

-0.4 mavi, 0.4 sarı anlamına gelir. Ayrıca none (0% eşdeğeridir) kullanılabilir.
/ A

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

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

Nispi değer dilimi

oklab(from color L a b / A)
Değer Açıklama
from color

Kelimelerle başlar, ardından temel rengi gösteren renk değeri gelir.

Bu, nispi renklerin temel aldığı temel renktir.
L

Gerekli. Renkin algılanan parlaklığını tanımlar, 0 ila 1 arasındaki sayı veya 0% ila 100% arasındaki yüzdelik olabilir.

0 (veya 0%) siyah, 1 (veya 100%) beyaz anlamına gelir.

Ayrıca none (0% eşdeğeridir) kullanılabilir.
a

Gerekli. -0.4 ile 0.4 arasındaki sayı veya -100% ile 100% arasındaki yüzdelik olarak tanımlanır.

Renk a eksenine olan mesafeyi tanımlar, renkin kırmızı-yeşil derecesini belirtir.

-0.4 yeşil, 0.4 kırmızı anlamına gelir. Ayrıca none (0% eşdeğeridir) kullanılabilir.
b

Gerekli. -0.4 ile 0.4 arasındaki sayı veya -100% ile 100% arasındaki yüzdelik olarak tanımlanır.

Renk b eksenine olan mesafeyi tanımlar, renkin sarı-mavi derecesini belirtir.

-0.4 mavi, 0.4 sarı anlamına gelir. Ayrıca none (0% eşdeğeridir) kullanılabilir.
/ A

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

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

Teknik ayrıntılar

Sürüm: CSS Color Module Level 4

Tarayıcı desteği

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

Chrome Edge Firefox Safari Opera
oklab()
111 111 113 15.4 97
Parametrelerde sayı ve yüzdelik olarak karışık kullanım
116 116 113 16.2 102

İlgili sayfalar

Referans:CSS Renkleri

Referans:CSS hsl() fonksiyonu

Referans:CSS hwb() fonksiyonu

Referans:CSS lch() fonksiyonu

Referans:CSS lab() fonksiyonu

Referans:CSS oklch() fonksiyonu