Fungsi color-mix() CSS memungkinkan Anda mencampur warna, di salah satu ruang warna yang didukung, langsung dari CSS Anda.
Sebelum color-mix(), untuk menggelapkan, mencerahkan, atau menurunkan saturasi warna, developer menggunakan
prepemroses CSS atau
calc() di saluran
warna.
.color-mixing-with-sass {
/* Sass: equally mix red with white */
--red-white-mix: color.mix(red, white);
}
Sass telah bekerja dengan baik untuk tetap menjadi yang terdepan dalam spesifikasi CSS warna. Namun, belum ada cara nyata untuk mencampur warna dalam CSS. Untuk mendekatinya, Anda perlu melakukan penghitungan nilai warna parsial. Berikut adalah contoh yang telah dikurangi mengenai cara CSS dapat 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() menghadirkan
kemampuan untuk mencampur warna ke CSS. Developer dapat memilih ruang warna yang akan dicampur
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, kecanggihan, dan API berfitur lengkap. Suka sekali.
Mencampur warna dalam CSS
CSS ada dalam dunia multi-warna dan gamut warna. Oleh karena itu, penentuan ruang warna untuk pencampuran tidak bersifat opsional. Selain itu, ruang warna yang berbeda dapat secara drastis mengubah hasil campuran, sehingga mengetahui efek ruang warna akan membantu Anda mendapatkan hasil yang Anda butuhkan.
Untuk pengantar interaktif, coba alat color-mix() ini:
- Mempelajari efek setiap ruang warna.
- Jelajahi efek interpolasi hue saat melakukan pencampuran dalam ruang warna silinder (lch, oklch, hsl, dan hwb).
- Ubah warna yang sedang 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.
Bercampur dalam berbagai ruang warna
Ruang warna default untuk pencampuran (dan gradien) adalah oklab. 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 mereka campur tidak akan
membuat perbedaan besar, kan? 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);
Ada pengaruh besar!
Ambil blue dan white untuk contoh lain. Saya memilih ini secara khusus karena ini adalah kasus di mana
bentuk ruang warna dapat mempengaruhi hasil. Dalam hal ini, sebagian besar ruang warna menjadi ungu saat beralih dari putih ke biru. Ini
juga menunjukkan bagaimana oklab merupakan ruang warna yang andal untuk pencampuran, warna ini
paling mendekati ekspektasi sebagian besar orang untuk memadukan warna putih dan biru (tanpa warna 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() juga merupakan pengetahuan yang bagus untuk membuat gradien. Sintaksis Warna 4 juga memungkinkan gradien menentukan ruang warna, dengan
gradien menampilkan campuran pada 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 "yang terbaik", tidak ada satu warna pun. Itu sebabnya ada
begitu banyak opsi. Selain itu, 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 tampil beda dan menjadi pilihan yang tepat.
Misalnya, jika Anda ingin hasil mix yang cerah, gunakan hsl atau hwb. Dalam demo berikut, dua warna cerah (magenta dan limau) dicampur menjadi satu dan hsl dan hwb menghasilkan hasil yang cerah, sedangkan sRGB dan oklab menghasilkan warna tidak jenuh.
Jika Anda menginginkan konsistensi dan kehalusan, gunakan oklab. Dalam demo berikut yang bercampur biru dan hitam, hsl dan hwb menghasilkan warna yang terlalu cerah dan bergeser hue, sedangkan sRGB dan oklab menghasilkan warna biru yang lebih gelap.
Luangkan lima menit dengan color-mix() playground, uji berbagai warna
dan ruang, dan Anda akan mulai memahami keunggulan setiap ruang. Selain itu,
harapkan lebih banyak panduan seputar ruang warna terjadi seiring kita semua menyesuaikan
potensinya dalam antarmuka pengguna.
Menyesuaikan metode interpolasi hue
Jika memilih untuk mencampur dalam ruang warna silinder, pada dasarnya semua ruang warna dengan saluran hue h yang menerima sudut, Anda dapat menentukan apakah interpolasinya menjadi shorter, longer, decreasing, dan increasing. Hal ini
dibahas dengan baik dalam Panduan Warna HD jika Anda ingin mempelajari lebih lanjut.
Berikut adalah contoh campuran biru ke putih yang sama, tetapi kali ini, hanya ada di ruang silinder dengan metode interpolasi hue yang berbeda.
Ini adalah Codepen lain yang saya buat untuk membantu memvisualisasikan interpolasi hue, khususnya untuk gradien. Saya yakin hal ini akan membantu Anda memahami bagaimana setiap ruang warna menghasilkan hasil campurannya saat interpolasi hue ditentukan. Silakan lakukan studi!
Mencampur dengan berbagai sintaksis warna
Sejauh ini, kita sebagian besar telah mencampurkan warna CSS bernama, seperti blue dan white. Pencampuran warna CSS
siap mencampurkan warna yang berasal dari dua ruang warna berbeda. Ini
alasan lain mengapa penting untuk menentukan ruang warna untuk campuran, karena menetapkan
ruang bersama saat dua 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 menjadi oklch,
lalu dicampur. Cukup keren dan fleksibel.
Menyesuaikan rasio pencampuran
Sangat kecil kemungkinannya bahwa setiap kali Anda mencampur, Anda menginginkan bagian yang sama dari setiap warna, seperti yang telah ditunjukkan oleh sebagian besar contoh sejauh ini. Kabar baik, ada sintaksis untuk mengartikulasikan berapa banyak setiap warna yang harus dilihat dalam campuran yang dihasilkan.
Untuk memulai topik ini, berikut contoh mix 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 beberapa contoh ini untuk menjelaskan {i>edge case<i} dengan baik. Rangkaian contoh pertama menunjukkan bahwa 50% tidak diperlukan, tetapi dapat ditentukan secara opsional. Contoh terakhir menunjukkan kasus yang menarik ketika rasio melebihi 100% jika ditambahkan bersama-sama, rasio tersebut dibatasi hingga total 100%.
Perlu diketahui juga, jika hanya satu warna yang menentukan rasio, warna lainnya diasumsikan sebagai sisa warna hingga 100%. Berikut beberapa contoh lainnya untuk membantu menggambarkan 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 menggambarkan dua aturan: 1. Jika rasio melebihi 100%, rasio akan dibatasi dan didistribusikan secara merata. 1. Jika hanya satu rasio yang diberikan, warna lain akan disetel ke 100 dikurangi rasio tersebut.
Aturan terakhir kurang begitu jelas; apa yang terjadi jika persentase diberikan untuk kedua warna dan jumlahnya tidak mencapai 100%?
color-mix(in lch, purple 20%, plum 20%)
Kombinasi color-mix() ini menghasilkan transparansi dan transparansi 40%.
Jika rasio tidak bertambah hingga 100%, campuran yang dihasilkan tidak akan buram.
Tidak ada warna yang akan dicampur sepenuhnya.
Bertingkat color-mix()
Seperti semua CSS, penyusunan bertingkat ditangani dengan baik dan seperti yang diharapkan; fungsi internal akan diselesaikan terlebih dahulu dan menampilkan nilainya ke konteks induk.
color-mix(in lch, purple 40%, color-mix(plum, white))
Jangan ragu untuk mengumpulkan sebanyak yang Anda butuhkan untuk mendapatkan hasil yang sedang Anda upayakan.
Membuat skema warna terang dan gelap
Mari membuat skema warna dengan color-mix().
Skema warna dasar
Pada 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 diberi warna baru sehingga latar belakang gelap dan warna teks 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 dilakukan dengan memadukan warna putih atau hitam menjadi warna merek.
Skema warna menengah
Ini dapat dilakukan selangkah lebih jauh dengan menambahkan lebih dari sekadar tema terang dan gelap. Dalam demo berikut, perubahan pada grup pilihan akan memperbarui atribut pada tag HTML [color-scheme="auto"] yang kemudian memungkinkan pemilih menerapkan tema warna secara bersyarat.
Demo perantara ini juga menunjukkan teknik tema warna dengan semua
warna tema tercantum di :root. Hal ini membuat mereka mudah untuk melihat semuanya
dan melakukan penyesuaian jika perlu. Selanjutnya di stylesheet, Anda dapat menggunakan variabel seperti yang telah
ditentukan. Tindakan ini akan menghemat perburuan melalui stylesheet untuk manipulasi warna karena
semuanya terdapat dalam blok :root awal.
Kasus penggunaan yang lebih menarik
Ana Tudor memiliki demo bagus dengan beberapa kasus penggunaan untuk dipelajari:
Men-debug color-mix() dengan DevTools
Chrome DevTools memiliki dukungan yang baik untuk color-mix(). Fitur ini mengenali dan
menyoroti sintaksis, membuat pratinjau campuran tepat di samping gaya di
panel Styles, dan memungkinkan pemilihan warna alternatif.
Ini akan terlihat seperti ini di DevTools:
Selamat menggabungkan semuanya!