CSS color() Fonksiyonu

Tanımlama ve Kullanım

CSS'nin color() Bu fonksiyon, belirli bir renk alanında renk belirlemeyi sağlar.

Örnek

Örnek 1

Display-p3 renk alanında arka plan rengi (şeffaflık 0.3) belirtilir:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(display-p3 0.6 0.6 0 / .3);
}

Kişisel olarak deneyin

Örnek 2

Göreceli Değer Sözdizimi kullanarak:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(from blue srgb r g b / 0.4);
}

Kişisel olarak deneyin

CSS Sözdizimi

Mutlak Değer Sözdizimi

color(colorspace c1 c2 c3 / A)
Değer Açıklama
colorspace

Gerekli. Tanımlanmış renk alanlarından birini tanımlar:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Gerekli. Renk alanının bileşen değerini belirtir.

Her değer, sayı (0 ile 1 arasında), yüzdelik (0% ile 100% arasında) veya none anahtar kelimesi olarak yazılabilir.
/ A

İsteğe bağlı. Renk şeffaflık kanalı değerini belirtir (0 tamamen şeffaftır, 100 tamamen şeffaf değildir).

Ayrıca none (şeffaflık kanalı yok anlamına gelir) kullanılabilir.

Varsayılan değeri 100'dür.

Göreceli Değer Sözdizimi

color(from color colorspace c1 c2 c3 / A)
Değer Açıklama
from color

Anahtar kelime ile başlar ve ardından orijinal renk değerini gösterir.

Bu, göreceli renklerin temel aldığı orijinal renktir.
colorspace

Gerekli. Tanımlanmış renk alanlarından birini tanımlar:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Gerekli. Renk alanının bileşen değerini belirtir.

Her değer, sayı (0 ile 1 arasında), yüzdelik (0% ile 100% arasında) veya none anahtar kelimesi olarak yazılabilir.
/ A

İsteğe bağlı. Renk şeffaflık kanalı değerini belirtir (0 tamamen şeffaftır, 100 tamamen şeffaf değildir).

Ayrıca none (şeffaflık kanalı yok anlamına gelir) kullanılabilir.

Varsayılan değeri 100'dür.

Teknik Ayrıntılar

Sürüm: CSS Color Module Level 5

Tarayıcı Desteği

Tablodaki rakamlar, bu işlevi tam olarak destekleyen ilk tarayıcı sürümünü gösterir.

Chrome Edge Firefox Safari Opera
111 111 113 15 97

İlgili sayfalar

Referans:CSS Renkleri