CodeKitHubApa Itu Alat Ini?
Pencampur warna melakukan interpolasi linear pada channel merah, hijau, dan biru dari dua warna pada rasio yang dipilih — perhitungan matematis yang sama yang digunakan gradien secara internal. Pada 0% hasilnya adalah Warna A, pada 100% adalah Warna B, dan pada 50% adalah titik tengah aritmetik dari setiap channel RGB.
Ini berbeda dari mencampur cat fisik (yang bersifat subtraktif dan bergantung pada pigmen), dan juga bukan hal yang sama dengan merata-ratakan di ruang HSL — interpolasi linear RGB adalah metode yang digunakan gradien CSS, alat desain, dan sebagian besar utilitas "warna di antara dua warna", sehingga hasilnya sesuai dengan yang akan Anda lihat pada gradien browser antara dua warna yang sama.
Mengapa Menggunakannya?
- Temukan warna hover atau status aktif yang terlihat alami di antara warna dasar dan warna aksen Anda — alih-alih menebak-nebak penyesuaian secara acak.
- Lihat kode HEX yang tepat pada rasio berapa pun, bukan sekadar menerka dari tangkapan layar gradien.
- Tangga 11 langkah memberi Anda palet lengkap dari satu warna ke warna lain hanya dengan satu klik, berguna untuk visualisasi data atau gradien multi-titik.
- Klik langkah mana pun untuk langsung menyalin kode HEX-nya.
- Gratis, instan, dan sepenuhnya lokal — tanpa unggah, tanpa akun.
Cara Menggunakan
- Pilih Warna A dan Warna B menggunakan pemilih warna atau dengan mengetik kode HEX.
- Geser slider rasio untuk mengatur seberapa banyak Warna B yang dicampurkan.
- Baca nilai HEX dan RGB hasil di atas swatch warna.
- Klik swatch mana pun pada tangga 11 langkah di bawah untuk menyalin kode HEX-nya.
Contoh
Input
Warna A #3B82F6 (biru), Warna B #F59E0B (amber), rasio 50%Output
#9B9E7D — rgb(155, 158, 125)Tepat pada 50%, setiap channel RGB adalah rata-rata aritmetik dari channel kedua warna input.
Pertanyaan yang Sering Diajukan
Mengapa hasil ini tidak sama dengan yang saya dapatkan saat mencampur cat sungguhan?
Mencampur cat bersifat subtraktif (pigmen menyerap cahaya) dan bergantung pada pigmen spesifik yang digunakan — misalnya, mencampur cat biru dan kuning menghasilkan hijau. Alat ini mencampur cahaya (channel RGB) secara aditif/linear, cara yang sama digunakan layar, gradien CSS, dan sebagian besar alat desain digital untuk mencampur warna. Kedua sistem ini memang menghasilkan hasil yang berbeda secara desain, bukan karena kesalahan.
Apakah ini sama dengan linear-gradient CSS antara kedua warna?
Ya — linear-gradient(warnaA, warnaB) CSS melakukan interpolasi channel RGB dengan cara yang sama seperti alat ini, sehingga warna yang akan Anda lihat di titik tengah gradien tersebut sesuai dengan hasil 50% di sini.
Mengapa warna campuran kadang terlihat kusam atau abu-abu?
Mencampur dua warna jenuh namun sangat berbeda (seperti biru dan oranye, yang hampir komplementer) di ruang RGB sering menghasilkan titik tengah abu-abu kecokelatan dengan saturasi rendah — ini adalah sifat asli dari interpolasi RGB, bukan bug. Jika Anda menginginkan campuran yang lebih hidup, coba campurkan warna yang lebih berdekatan pada roda warna, atau campurkan di ruang HSL dengan mengubah hue sambil mempertahankan saturasi tinggi (sesuatu yang tidak dilakukan oleh pencampur RGB murni ini).
Bisakah saya mencampur lebih dari dua warna sekaligus?
Tidak dalam satu langkah — alat ini mencampur tepat dua warna. Untuk menggabungkan tiga warna, campurkan dua warna pertama pada rasio pilihan Anda, salin hasilnya, lalu tempelkan sebagai Warna A baru terhadap warna ketiga Anda. Melakukannya secara bertahap juga memberi Anda kendali atas bobot masing-masing, yang tidak bisa didapat dari rata-rata tiga warna sekaligus.
Sebaiknya saya pakai ini atau Color Shades Generator?
Jika Anda butuh warna yang berada di antara dua warna berbeda — misalnya warna transisi antara biru brand Anda dan aksen amber — gunakan pencampur ini. Jika Anda butuh varian lebih terang dan lebih gelap dari satu warna (status hover, latar belakang, tangga bergaya Tailwind 50-900), gunakan Color Shades Generator: alat itu mempertahankan hue dan saturasi tetap, hanya mengubah lightness, sehingga setiap hasil tetap jelas berada dalam keluarga warna yang sama.
Format warna apa saja yang bisa saya ketik pada kolom input?
Kolom teks menerima kode HEX 6 digit, dengan atau tanpa tanda # di depan (misalnya 3B82F6 atau #3B82F6). Hex singkat 3 digit, notasi rgb(), dan nama warna CSS tidak dapat diproses di sana — tetapi Anda bisa memilih warna apa pun secara visual dengan color picker bawaan di samping setiap kolom, dan kolom HEX akan diperbarui secara otomatis.