CSS color-mix()

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Adam Argyle

Fungsi color-mix() CSS memungkinkan Anda mencampur warna, di ruang warna apa pun yang didukung, langsung dari CSS.

Sebelum color-mix(), untuk menggelapkan, mencerahkan, atau mendesaturasi warna, developer menggunakan preprosesor CSS atau calc() pada saluran warna.

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass telah melakukan pekerjaan yang sangat baik untuk tetap mengikuti spesifikasi CSS warna. Namun, belum ada cara nyata untuk mencampur warna di CSS. Untuk mendekatinya, Anda perlu melakukan penghitungan nilai warna sebagian. Berikut adalah contoh yang diperkecil tentang cara CSS menyimulasikan pencampuran saat ini:

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() memberikan kemampuan untuk mencampur warna ke CSS. Developer dapat memilih ruang warna yang akan dicampurkan dan seberapa dominan setiap warna dalam campuran.

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

Itulah yang kita inginkan. Fleksibilitas, kemampuan, dan API yang dilengkapi fitur lengkap. Suka sekali.

Mencampur warna di CSS

CSS ada di beberapa ruang warna dan dunia gamut warna, dan karenanya, menentukan ruang warna untuk pencampuran bukanlah opsional. Selain itu, ruang warna yang berbeda dapat mengubah hasil campuran secara drastis, sehingga mengetahui efek ruang warna akan membantu Anda mendapatkan hasil yang Anda butuhkan.

Untuk pengantar interaktif, coba alat color-mix() ini: - Jelajahi efek setiap ruang warna. - Jelajahi efek interpolasi hue saat mencampur dalam ruang warna silinder (lch, oklch, hsl, dan hwb). - Ubah warna yang dicampur dengan mengklik salah satu dari dua kotak warna teratas. - Gunakan penggeser untuk mengubah rasio pencampuran. - Kode CSS color-mix() yang dihasilkan tersedia di bagian bawah.

Menggabungkan berbagai ruang warna

Ruang warna default untuk pencampuran (dan gradien) adalah oklab. Metode ini memberikan hasil yang konsisten. Anda juga dapat menentukan ruang warna alternatif, untuk menyesuaikan campuran dengan kebutuhan Anda.

Misalnya black dan white. Ruang warna yang dicampurkan tidak akan membuat perbedaan yang besar, bukan? Salah.

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);