CSS color-mix()

Adam Argyle

color-mix() CSS memungkinkan Anda mencampur warna, dalam ruang warna mana pun yang didukung, langsung dari CSS Anda.

Sebelum color-mix(), untuk menggelapkan, mencerahkan, atau menurunkan saturasi warna, developer menggunakan Praprosesor CSS atau calc() dalam warna saluran TV Anda.

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

Sass telah melakukan banyak hal berada di depan spesifikasi CSS warna. Namun, belum ada cara nyata untuk mencampur warna dalam CSS. Untuk mendekatinya, Anda perlu menghitung sebagian nilai warna. Berikut adalah contoh pengurangan 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 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, daya, dan API berfitur lengkap. Suka sekali.

Mencampur warna dalam CSS

CSS ada dalam banyak ruang warna dan dunia gamut warna, dan karena itu bukan opsional untuk menentukan ruang warna untuk pencampuran. Selain itu, berbagai ruang warna bisa secara drastis mengubah hasil gabungan, jadi mengetahui efeknya ruang warna akan membantu Anda mendapatkan hasil yang Anda butuhkan.

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

Mencampur dalam berbagai ruang warna

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

Misalnya, black dan white. Ruang warna yang berpadu 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);

Dampaknya besar!

Ambil blue dan white untuk contoh lain. Saya memilih ini karena ini adalah kasus di mana bentuk ruang warna dapat memengaruhi hasilnya. Dalam hal ini, sebagian besar ruang warna akan berubah menjadi ungu saat beralih dari putih ke biru. Ini juga menunjukkan bahwa oklab adalah ruang warna yang dapat diandalkan untuk pencampuran, paling sesuai dengan ekspektasi kebanyakan orang untuk memadukan warna putih dan biru (bukan 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 baik untuk membuat gradien berikutnya Sintaks warna 4 juga memungkinkan gradien untuk menentukan ruang warna, di mana gradien menunjukkan 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 "terbaik", tidak ada satu pun. Itu sebabnya ada begitu banyak pilihan! Juga tidak akan ada ruang warna baru yang ditemukan (lihat oklch dan oklab), jika salah satu adalah "yang terbaik". Setiap warna ruang angkasa 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, dua warna cerah (magenta dan limau) dicampur bersama dan hsl dan hwb keduanya memberikan hasil yang cerah, sementara sRGB dan oklab menghasilkan warna tak jenuh.

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

Luangkan waktu lima menit dengan color-mix() playground, menguji berbagai warna dan ruang, dan Anda akan mulai memahami manfaat setiap ruang. Selain itu, mengharapkan lebih banyak panduan seputar ruang warna terjadi saat kita semua menyesuaikan diri dengan potensi dalam antarmuka pengguna kita.

Menyesuaikan metode interpolasi hue

Jika Anda memilih untuk mencampur ruang warna silinder, pada dasarnya semua warna ruang dengan saluran hue h yang menerima sudut, Anda dapat menentukan apakah interpolasi berjalan shorter, longer, decreasing, dan increasing. Ini adalah dibahas dengan baik dalam Panduan Warna HD ini jika Anda ingin mempelajari lebih lanjut.

Ini contoh campuran biru ke putih yang sama, tapi kali ini, hanya dalam ruang silinder dengan metode interpolasi rona yang berbeda.

Berikut ini Codepen lain yang saya buat untuk membantu memvisualisasikan interpolasi hue, tapi khususnya untuk gradien. Saya yakin ini akan membantu Anda memahami bagaimana masing-masing ruang warna menghasilkan hasil campurannya ketika interpolasi hue ditentukan, pelajari!

Mencampur dengan berbagai sintaksis warna

Sejauh ini, kita sebagian besar telah menggabungkan CSS yang diberi nama warna, seperti blue dan white. Warna CSS pencampuran siap untuk mencampur warna yang dari dua ruang warna berbeda. Ini adalah alasan lain adalah kunci untuk menentukan ruang warna untuk pencampuran, saat mengatur ruang bersama ketika 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 menjadi oklch dan kemudian dicampur. Cukup keren dan fleksibel.

Menyesuaikan rasio pencampuran

Jarang sekali jika setiap kali Anda mencampur warna, Anda menginginkan bagian yang sama dari setiap warna, seperti yang telah ditunjukkan oleh sebagian besar contoh. Kabar baiknya, ada sintaks untuk mengartikulasikan berapa banyak setiap warna yang harus terlihat 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 contoh-contoh ini dapat menjelaskan {i>edge case<i} dengan baik. Set pertama dari contoh menunjukkan bagaimana 50% tidak wajib tetapi dapat ditentukan secara opsional. Terakhir contoh menunjukkan kasus menarik saat rasio melebihi 100% saat ditambahkan secara keseluruhan, keduanya sama-sama dihubungkan dengan total 100%.

Perhatikan juga, jika hanya satu warna yang menentukan rasio, warna lainnya diasumsikan sisa data menjadi 100%. Berikut beberapa contoh untuk membantu menggambarkan hal ini perilaku model.

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: Akun Layanan 1. Jika rasio melebihi 100%, rasio tersebut akan dibatasi dan didistribusikan secara merata. 1. Jika hanya satu rasio yang diberikan, warna lain ditetapkan ke 100 dikurangi rasio tersebut.

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

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

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

Susun bertingkat color-mix()

Seperti semua CSS, penyarangan ditangani dengan baik dan seperti yang diharapkan; fungsi {i>inner<i} akan diselesaikan terlebih dahulu dan mengembalikan nilainya ke konteks induk.

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

Jangan ragu untuk menyusun bertingkat sebanyak yang Anda butuhkan untuk mendapatkan hasil yang ingin Anda capai.

Membangun skema warna terang dan gelap

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

Skema warna dasar

Pada CSS berikut, tema terang dan gelap dibuat berdasarkan heksa merek {i>color<i}. Tema terang membuat dua warna teks biru tua dan putih yang sangat terang warna permukaan latar belakang. Kemudian dalam kueri media preferensi gelap, parameter kustom properti diberi warna baru sehingga latar belakang menjadi gelap dan warna teks ringan.

: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 memadukan warna putih atau hitam ke dalam warna merek.

Skema warna menengah

Hal ini dapat ditingkatkan dengan menambahkan lebih dari sekadar tema terang dan gelap. Di beberapa demo berikut, perubahan pada grup radio memperbarui atribut pada HTML memberi tag [color-scheme="auto"] yang kemudian memungkinkan pemilih diterapkan secara bersyarat tema warna.

Demo menengah ini juga menunjukkan teknik tema warna di mana semua warna tema tercantum di :root. Hal ini membuat mereka mudah untuk melihat semuanya dan menyesuaikannya jika perlu. Nantinya di stylesheet, Anda bisa menggunakan variabel sebagaimana didefinisikan. Ini menghemat perburuan melalui stylesheet untuk manipulasi warna sebagai semuanya berada dalam blok :root awal.

Kasus penggunaan yang lebih menarik

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

Men-debug color-mix() dengan DevTools

Chrome DevTools memiliki dukungan yang bagus untuk color-mix(). Model ini mengenali dan menyoroti sintaks, membuat pratinjau dari campuran tepat di sebelah gaya dalam panel {i>Styles<i} dan memungkinkan pemilihan warna alternatif.

Hasilnya akan terlihat seperti ini di DevTools:

Selamat bersenang-senang!