CSS color-mix() fonksiyonu

Tanımı ve Kullanımı

CSS'nin color-mix() Bu fonksiyon, belirtilen renk alanında belirli bir oranda iki renk değeri karıştırmak için kullanılır.

Örnek

Örnek 1

Hsl renk alanında belirtilen oranlarda iki renk değeri karıştırın:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}

Kişisel olarak deneyin

Örnek 2

Oklab renk alanında farklı oranlarda iki renk değeri karıştırın:

li:nth-child(1) {
  background-color: color-mix(in oklab, #6a5acd 0%, pink);
}
li:nth-child(2) {
  background-color: color-mix(in oklab, #6a5acd 25%, pink);
}
li:nth-child(3) {
  background-color: color-mix(in oklab, #6a5acd 50%, pink);
}
li:nth-child(4) {
  background-color: color-mix(in oklab, #6a5acd 75%, pink);
}
li:nth-child(5) {
  background-color: color-mix(in oklab, #6a5acd 100%, pink);
}

Kişisel olarak deneyin

CSS Dilbilgisi

color-mix(color-interpolation-method, color1 %, color2 %)
Değer Açıklama
color-interpolation-method

Gerekli. Kullanılacak renk interpolasyon yöntemini tanımlar.

Anahtar kelime in ve renk alanı adı ile oluşur.

Aşağıdaki iki türden biri kullanılabilir:

Dikdörtgen Renk Alanı:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • lab
  • oklab
  • xyz
  • xyz-d50
  • xyz-d65

Polar Renk Alanı:

  • hsl
  • hwb
  • lch
  • oklch
color1 %

Gerekli. Renk karışımını belirlemek için kullanılacak renk değerleri ve seçmeli yüzdelik değerler (0% ile 100% arasında), renk oranını belirlemek için kullanılır.

Varsayılan yüzdelik değer 50%'tir.
color2 %

Gerekli. Renk karışımını belirlemek için kullanılacak renk değerleri ve seçmeli yüzdelik değerler (0% ile 100% arasında), renk oranını belirlemek için kullanılır.

Varsayılan yüzdelik değer 50%'tir.

Teknik Ayrıntılar

Sürüm: CSS Color Module Level 5

Tarayıcı Desteği

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

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

İlgili sayfalar

Referans:CSS Renkleri