CSS color-mix()

Adam Argyle

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

Sebelum color-mix(), untuk menggelapkan, mencerahkan, atau mengurangi saturasi warna, developer menggunakan praprosesor 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 hebat untuk tetap berada di depan spesifikasi CSS warna. Namun, belum ada cara yang sebenarnya untuk mencampur warna di CSS. Untuk mendekati, Anda harus melakukan perhitungan nilai warna parsial. Berikut adalah contoh yang dikurangi tentang cara CSS dapat mensimulasikan 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() menghadirkan kemampuan untuk mencampur warna ke CSS. Developer dapat memilih ruang warna yang mereka campur 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 berfitur lengkap. Suka sekali.

Mencampur warna di CSS

CSS ada di dunia ruang warna dan gamut warna yang beragam, dan karena itu menentukan ruang warna untuk pencampuran bukanlah hal yang 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 silindris (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.

Mencampur di berbagai ruang warna

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

Ambil contoh black dan white. Ruang warna yang mereka campur 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);

Hal ini memang memiliki efek yang besar.

Ambil contoh blue dan white. Saya memilih ini secara khusus karena ini adalah kasus ketika bentuk ruang warna dapat memengaruhi hasilnya. Dalam hal ini, sebagian besar ruang warna menjadi ungu saat berpindah dari putih ke biru. Hal ini juga menunjukkan bahwa oklab adalah ruang warna yang sangat andal untuk pencampuran, yang paling dekat dengan ekspektasi sebagian besar orang tentang pencampuran putih dan biru (tidak ada ungu).

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

Mempelajari efek ruang warna dengan color-mix() adalah pengetahuan yang bagus untuk membuat gradien juga. Sintaksis warna 4 juga memungkinkan gradien menentukan ruang warna, tempat gradien menampilkan campuran di area ruang.

.black-to-white-gradient-in-each-space {
  --srgb: linear-gradient(to right in srgb, black, white);
  --srgb-linear: linear-gradient(to right in srgb-linear, black, white);
  --lab: linear-gradient(to right in lab, black, white);
  --oklab: linear-gradient(to right in oklab, black, white);
  --lch: linear-gradient(to right in lch, black, white);
  --oklch: linear-gradient(to right in oklch, black, white);
  --hsl: linear-gradient(to right in hsl, black, white);
  --hwb: linear-gradient(to right in hwb, black, white);
  --xyz: linear-gradient(to right in xyz, black, white);
  --xyz-d50: linear-gradient(to right in xyz-d50, black, white);
  --xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}

Jika Anda bertanya-tanya ruang warna mana yang "terbaik", tidak ada. Itulah sebabnya ada begitu banyak opsi. Tidak akan ada ruang warna baru yang ditemukan (lihat oklch dan oklab), jika salah satunya adalah "yang terbaik". Setiap ruang warna dapat memiliki momen unik untuk bersinar dan menjadi pilihan yang tepat.

Misalnya, jika Anda menginginkan hasil campuran yang cerah, gunakan hsl atau hwb. Dalam demo berikut, dua warna cerah (magenta dan lime) dicampur dan hsl serta hwb menghasilkan hasil yang cerah, sedangkan srgb dan oklab menghasilkan warna yang tidak jenuh.

Jika Anda menginginkan konsistensi dan kehalusan, gunakan oklab. Dalam demo berikut yang mencampur biru dan hitam, hsl dan hwb menghasilkan warna yang terlalu cerah dan hue yang bergeser, sedangkan srgb dan oklab menghasilkan biru yang lebih gelap.

Luangkan waktu lima menit dengan color-mix() playground, uji berbagai warna dan ruang, dan Anda akan mulai merasakan keunggulan setiap ruang. Selain itu, harapkan lebih banyak panduan terkait ruang warna saat kita semua menyesuaikan diri dengan potensi ruang warna di antarmuka pengguna.

Menyesuaikan metode interpolasi hue

Jika Anda memilih untuk mencampur dalam ruang warna silindris, pada dasarnya ruang warna apa pun dengan saluran hue h yang menerima sudut, Anda dapat menentukan apakah interpolasi akan menjadi shorter, longer, decreasing, dan increasing. Hal ini dibahas dengan baik dalam Panduan Warna HD ini jika Anda ingin mempelajari lebih lanjut.

Berikut adalah contoh campuran biru ke putih yang sama, tetapi kali ini, hanya di ruang silindris dengan metode interpolasi hue yang berbeda.

Berikut adalah Codepen lain yang saya buat untuk membantu memvisualisasikan interpolasi hue, tetapi khusus untuk gradien. Saya yakin hal ini akan membantu Anda memahami cara setiap ruang warna menghasilkan hasil campuran saat interpolasi hue ditentukan, tetapi berikan studi.

Mencampur dengan berbagai sintaksis warna

Sejauh ini, kita sebagian besar telah mencampur warna bernama CSS, seperti blue dan white. Pencampuran warna CSS siap mencampur warna yang berasal dari dua ruang warna yang berbeda. Ini adalah alasan lain mengapa penting untuk menentukan ruang warna untuk pencampuran, karena ruang warna tersebut menetapkan ruang umum saat kedua warna tidak berada di ruang yang sama.

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

Pada contoh sebelumnya, hsl dan display-p3 akan dikonversi ke oklch, lalu dicampur. Cukup keren dan fleksibel.

Menyesuaikan rasio pencampuran

Kemungkinan besar setiap kali Anda mencampur, Anda menginginkan bagian yang sama dari setiap warna, seperti yang ditunjukkan oleh sebagian besar contoh sejauh ini. Kabar baiknya, ada sintaksis untuk mengartikulasikan seberapa banyak setiap warna yang harus dilihat dalam campuran yang dihasilkan.

Untuk memulai topik ini, berikut adalah contoh campuran yang semuanya setara (dan dari spesifikasi):

.ratios-syntax-examples {
  /* omit the percentage for equal mixes */
  color: color-mix(in lch, purple, plum);
  color: color-mix(in lch, plum, purple);

  /* percentage can go on either side of the color */
  color: color-mix(in lch, purple 50%, plum 50%);
  color: color-mix(in lch, 50% purple, 50% plum);

  /* percentage on just one color? other color gets the remainder */
  color: color-mix(in lch, purple 50%, plum);
  color: color-mix(in lch, purple, plum 50%);

  /* percentages > 100% are equally clamped */
  color: color-mix(in lch, purple 80%, plum 80%);
  /* above mix is clamped to this */
  color: color-mix(in lch, purple 50%, plum 50%);
}

Saya menemukan contoh ini untuk menjelaskan kasus ekstrem dengan baik. Kumpulan contoh pertama menunjukkan bahwa 50% tidak diperlukan, tetapi dapat ditentukan secara opsional. Contoh terakhir menunjukkan kasus yang menarik ketika rasio melebihi 100% saat ditambahkan bersama-sama, rasio tersebut diklem secara merata hingga total 100%.

Perhatikan juga bahwa jika hanya satu warna yang menentukan rasio, warna lainnya diasumsikan sebagai sisa hingga 100%. Berikut beberapa contoh lainnya untuk membantu mengilustrasikan perilaku ini.

color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */

Contoh ini mengilustrasikan dua aturan: 1. Jika rasio melebihi 100%, rasio tersebut akan diklem dan didistribusikan secara merata. 1. Jika hanya satu rasio yang diberikan, warna lainnya akan ditetapkan ke 100 dikurangi rasio tersebut.

Aturan terakhir sedikit kurang jelas; apa yang terjadi jika persentase diberikan untuk kedua warna dan tidak berjumlah 100%?

color-mix(in lch, purple 20%, plum 20%)

Kombinasi color-mix() ini menghasilkan transparansi, transparansi 40%. Jika rasio tidak berjumlah 100%, campuran yang dihasilkan tidak akan buram. Tidak ada warna yang akan tercampur sepenuhnya.

color-mix() bertingkat

Seperti semua CSS, nesting ditangani dengan baik dan seperti yang diharapkan; fungsi dalam akan diselesaikan terlebih dahulu dan menampilkan nilainya ke konteks induk.

color-mix(in lch, purple 40%, color-mix(plum, white))

Jangan ragu untuk membuat nesting sebanyak yang Anda butuhkan untuk mendapatkan hasil yang Anda kerjakan.

Membuat skema warna terang dan gelap

Mari kita buat skema warna dengan color-mix().

Skema warna dasar

Dalam CSS berikut, tema terang dan gelap dibuat berdasarkan warna heksadesimal merek. Tema terang membuat dua warna teks biru tua dan warna permukaan latar belakang putih yang sangat terang. Kemudian, dalam kueri media preferensi gelap, properti kustom ditetapkan ke warna baru sehingga latar belakang menjadi gelap dan warna teks menjadi terang.

:root {
  /* a base brand color */
  --brand: #0af;

  /* very dark brand blue */
  --text1: color-mix(in oklab, var(--brand) 25%, black);
  --text2: color-mix(in oklab, var(--brand) 40%, black);

  /* very bright brand white */
  --surface1: color-mix(in oklab, var(--brand) 5%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text1: color-mix(in oklab, var(--brand) 15%, white);
    --text2: color-mix(in oklab, var(--brand) 40%, white);
    --surface1: color-mix(in oklab, var(--brand) 5%, black);
  }
}

Semua ini dicapai dengan mencampur putih atau hitam ke dalam warna merek.

Skema warna menengah

Hal ini dapat dilakukan selangkah lebih maju dengan menambahkan lebih dari tema terang dan gelap. Dalam demo berikut, perubahan pada grup tombol pilihan memperbarui atribut pada tag HTML [color-scheme="auto"] yang kemudian memungkinkan pemilih menerapkan tema warna secara kondisional.

Demo menengah ini juga menunjukkan teknik tema warna tempat semua warna tema tercantum di :root. Hal ini memudahkan Anda melihat semuanya bersama-sama dan menyesuaikannya jika diperlukan. Nanti dalam stylesheet, Anda dapat menggunakan variabel seperti yang ditentukan. Hal ini menghemat pencarian melalui stylesheet untuk manipulasi warna karena semuanya terdapat dalam blok :root awal.

Kasus penggunaan yang lebih menarik

Ana Tudor memiliki demo yang bagus dengan beberapa kasus penggunaan untuk dipelajari:

Melakukan proses debug color-mix() dengan DevTools

Chrome DevTools memiliki dukungan yang bagus untuk color-mix(). Chrome DevTools mengenali dan menandai sintaksis, membuat pratinjau campuran tepat di samping gaya di panel Styles, dan memungkinkan pemilihan warna alternatif.

Tampilannya akan terlihat seperti ini di DevTools:

Selamat mencampur!