Fungsi color-mix() CSS

Definisi dan penggunaan

CSS color-mix() Fungsi digunakan untuk menggabungkan nilai warna kedua dalam proporsi yang ditentukan di ruang warna yang diberikan.

Contoh

Contoh 1

Campur dua nilai warna berbeda dalam ruangan warna hsl berdasarkan proporsi yang ditentukan:

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

Coba Sendiri

Contoh 2

Campur dua nilai warna berbeda dalam ruangan warna oklab berdasarkan proporsi yang berbeda:

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);
}

Coba Sendiri

Sintaks CSS

color-mix(color-interpolation-method, color1 %, color2 %)
Nilai Deskripsi
color-interpolation-method

Diperlukan. Definisi metode interpolasi warna yang akan digunakan.

Terdiri dari kata kunci in diikuti dengan nama ruangan warna.

Dapat digunakan jenis berikut:

Ruangan warna persegi:

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

Ruangan warna polar:

  • hsl
  • hwb
  • lch
  • oklch
color1 %

Diperlukan. Warna yang akan dicampur, serta persentase pilihan (0% sampai 100%), digunakan untuk menentukan proporsi warna.

Nilai persentase default adalah 50%.
color2 %

Diperlukan. Warna yang akan dicampur, serta persentase pilihan (0% sampai 100%), digunakan untuk menentukan proporsi warna.

Nilai persentase default adalah 50%.

Detil Teknologi

Versi： Modul Warna CSS Level 5

Dukungan Browser

Tabel yang terdapat angka menunjukkan versi browser yang sepenuhnya mendukung fungsi ini.

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

Halaman yang berhubungan

Referensi：Warna CSS