CodeKitHubApakah alat ini?
Pencampur warna melakukan interpolasi linear antara saluran merah, hijau dan biru dua warna pada nisbah yang dipilih — matematik yang sama seperti yang digunakan gradien secara dalaman. Pada 0% hasilnya ialah Warna A, pada 100% ialah Warna B, dan pada 50% ialah purata aritmetik setiap saluran RGB.
Ini berbeza daripada mencampur cat fizikal (yang bersifat subtraktif dan bergantung kepada pigmen), dan ia juga tidak sama seperti mengambil purata dalam ruang HSL — interpolasi linear RGB adalah apa yang digunakan oleh gradien CSS, alat reka bentuk dan kebanyakan utiliti "warna antara dua warna", jadi hasilnya sepadan dengan apa yang anda akan lihat dalam gradien pelayar antara dua warna yang sama.
Kenapa guna alat ini?
- Cari warna hover atau keadaan aktif yang kelihatan semula jadi yang terletak antara warna asas anda dan aksen — bukannya meneka pelarasan secara rawak.
- Lihat kod HEX yang tepat pada sebarang nisbah, bukan sekadar menilai tangkapan skrin gradien secara pandangan mata.
- Tangga 11 langkah memberikan anda palet penuh dari satu warna ke warna lain dengan satu klik, berguna untuk visualisasi data atau gradien pelbagai perhentian.
- Klik mana-mana langkah untuk menyalin kod HEXnya serta-merta.
- Percuma, segera, dan sepenuhnya setempat — tiada muat naik, tiada akaun.
Cara menggunakannya
- Pilih Warna A dan Warna B menggunakan pemilih warna atau dengan menaip kod HEX.
- Seret pelungsur nisbah untuk menetapkan berapa banyak Warna B untuk dicampurkan.
- Baca nilai HEX dan RGB yang terhasil di atas contoh warna.
- Klik mana-mana contoh dalam tangga 11 langkah di bawah untuk menyalin kod HEXnya.
Contoh
Input
Warna A #3B82F6 (biru), Warna B #F59E0B (amber), nisbah 50%Hasil
#9B9E7D — rgb(155, 158, 125)Pada tepat 50%, setiap saluran RGB adalah purata aritmetik saluran kedua-dua warna input.
Soalan lazim
Kenapa ini tidak sepadan dengan apa yang saya akan dapat dengan mencampur cat sebenar?
Pencampuran cat bersifat subtraktif (pigmen menyerap cahaya) dan bergantung kepada pigmen tertentu yang terlibat — mencampur cat biru dan kuning, sebagai contoh, menghasilkan hijau. Alat ini mencampur cahaya (saluran RGB) secara aditif/linear, iaitu cara skrin, gradien CSS dan kebanyakan alat reka bentuk digital mencampur warna. Kedua-dua sistem ini menghasilkan hasil yang benar-benar berbeza secara sengaja, bukan disebabkan ralat.
Adakah ini sama seperti linear-gradient CSS antara dua warna tersebut?
Ya — linear-gradient(colorA, colorB) CSS melakukan interpolasi saluran RGB dengan cara yang sama seperti alat ini, jadi warna yang anda akan lihat di titik tengah gradien tersebut sepadan dengan hasil 50% di sini.
Kenapa warna campuran kadangkala kelihatan kelabu atau kotor?
Mencampur dua rona yang tepu tetapi sangat berbeza (seperti biru dan oren, yang hampir bersifat pelengkap) dalam ruang RGB sering menghasilkan titik tengah yang kelabu-perang dengan ketepuan rendah — ini adalah ciri sebenar interpolasi RGB, bukan pepijat. Jika anda mahukan campuran yang lebih terang, cuba campurkan warna yang lebih rapat antara satu sama lain pada roda warna, atau campurkan dalam ruang HSL dengan melaraskan rona sambil mengekalkan ketepuan tinggi (sesuatu yang pencampur RGB terus ini tidak lakukan).
Bolehkah saya mencampur lebih daripada dua warna sekali gus?
Bukan dalam satu langkah — alat ini mencampur tepat dua warna sahaja. Untuk menggabungkan tiga, campurkan dua yang pertama pada nisbah pilihan anda, salin hasilnya, dan tampalkannya sebagai Warna A baharu terhadap warna ketiga anda. Melakukannya secara berperingkat juga memberikan anda kawalan ke atas pemberatan, sesuatu yang purata tiga hala tunggal tidak akan berikan.
Patutkah saya gunakan ini atau Penjana Rona Warna?
Jika anda memerlukan warna yang terletak antara dua warna berbeza — katakan, rona peralihan antara biru jenama anda dan aksen amber — gunakan pencampur ini. Jika anda memerlukan varian yang lebih terang dan lebih gelap bagi satu warna (keadaan hover, latar belakang, tangga gaya Tailwind 50-900), gunakan Penjana Rona Warna sebaliknya: ia mengekalkan rona dan ketepuan tetap dan hanya mengubah kecerahan, jadi setiap hasil kekal jelas dalam keluarga warna yang sama.
Format warna apakah yang boleh saya taip ke dalam medan input?
Medan teks menerima kod HEX 6 digit, dengan atau tanpa # di hadapan (cth. 3B82F6 atau #3B82F6). Hex ringkas 3 digit, notasi rgb() dan nama warna CSS tidak dihuraikan di situ — tetapi anda boleh memilih sebarang warna secara visual dengan pemilih warna asli di sebelah setiap medan, dan medan HEX akan dikemas kini untuk sepadan.