Pencampur Warna

Hasil campuran dua warna bergantung pada cara mencampurnya

Campurkan biru #0000FF dan kuning #FFFF00 dalam porsi sama, maka perbedaannya langsung terlihat. Jika nilai RGB dirata-rata di layar, hasilnya abu-abu #808080. Jika dua cahaya disinarkan bersama dengan intensitas setengah, hasilnya abu-abu terang #BCBCBC. Dicampur seperti cat, hasilnya biru kehijauan #217D90, dan bila kuning dinaikkan menjadi 75%, warnanya mendekati hijau #81B265. Dengan OKLab, metode bawaan color-mix() di CSS, hasilnya biru langit #6CABC7.

Kalkulator di atas menampilkan kelima metode ini berdampingan dalam satu layar. Masukkan dua warna dan porsinya, lalu setiap metode menampilkan pita dari A ke B dan warna pada porsi saat ini. Dari metode yang Anda pilih, Anda bisa membuat nilai HEX, RGB, HSL, OKLCH, kode CSS, dan palet bertahap. Pada peta jalur pencampuran di bawahnya, Anda bisa melihat mengapa hasil menjadi kusam atau tetap cerah: setiap metode melewati jalur warna yang berbeda.

Mengapa warna campuran perlu dihitung dulu dan kapan dipakai

Dua warna yang sama membutuhkan cara pencampuran yang berbeda sesuai tempat pemakaiannya. Jika warna untuk layar diharapkan tampil seperti campuran cat, atau pencampuran cat hanya dinilai dari rata-rata di layar, hasilnya tidak akan sesuai dugaan.

• Desain web dan aplikasi: Saat membuat warna tombol yang sedikit lebih gelap ketika kursor diarahkan, atau warna latar pucat dari warna merek yang dicampur putih, dengan color-mix() di CSS, Anda bisa memeriksa HEX hasilnya terlebih dahulu.
• Grafik dan gradasi: Bagi dua warna menjadi 5, 7, atau 9 tahap untuk membuat deret warna yang berurutan. Yang penting adalah memilih metode yang tidak membuat bagian tengah menjadi kusam.
• Lukisan, kerajinan, dan cat dinding: Sebelum benar-benar mencampur cat, perkirakan secara kasar ke arah warna mana hasilnya condong dan seberapa banyak putih atau hitam yang perlu ditambahkan.
• Pelajaran dan penjelasan: Tunjukkan dengan dua warna yang sama mengapa pencampuran cahaya (aditif) dan pencampuran cat (subtraktif) memberi hasil yang berbeda.

Cara memakai kalkulator

1. Pada kolom warna A dan warna B, masukkan kode HEX seperti #3498db, 3498db, atau #f80, atau penulisan CSS seperti rgb(52 152 219), hsl(204 70% 53%), dan tomato. Ketuk contoh warna di kiri kolom untuk memilih dengan pemilih warna, dan tombol di tengah menukar A dan B.
2. Porsi B adalah bagian B dalam warna campuran. Jika Anda mengisi 30, hasilnya A 70% dan B 30%. Anda juga bisa menggeser penanda vertikal di atas kelima pita, atau mengetuk pita lalu menggeser 1% demi 1% dengan tombol ← →.
3. Ketuk nama metode di sebelah kiri agar metode itu dipakai pada kartu hasil dan palet bertahap. Tombol HEX di kanan langsung menyalin hasil metode tersebut saja.
4. Pada kartu hasil, salin nilai HEX, RGB, HSL, OKLCH, dan kode color-mix() CSS. Metode cat tidak punya fungsi yang setara di CSS, jadi ditulis dalam HEX.
5. Pada palet bertahap, pilih jumlah kotak lalu ambil sebagai daftar HEX, variabel CSS, atau gambar PNG. Ketuk satu kotak untuk menyalin HEX warnanya.

Lima metode pencampuran

Kelima metode menerima dua warna dan porsi yang sama, tetapi nilai yang dirata-ratakan berbeda. Kolom terakhir adalah hasil pencampuran biru #0000FF dan kuning #FFFF00 dengan perbandingan 50 : 50.

Rata-rata layar adalah metode yang dipakai pencampur HEX lama, sehingga hasilnya terasa familier, tetapi dua warna yang hampir berlawanan akan condong jauh ke abu-abu. Metode cahaya pada dua warna yang sama selalu menghasilkan warna yang sama atau lebih terang daripada rata-rata layar. Angka HEX adalah intensitas cahaya yang dimampatkan dengan kurva gama, sehingga jika intensitasnya dirata-ratakan lalu diubah kembali ke HEX, nilai tengahnya menjadi lebih terang.

Mengapa cat bercampur berbeda dari layar

Layar membentuk warna dengan menjumlahkan cahaya merah, hijau, dan biru (pencampuran aditif). Cat sebaliknya: dari cahaya yang jatuh, ia menyerap panjang gelombang tertentu dan memantulkan sisanya (pencampuran subtraktif). Cat biru terutama memantulkan gelombang pendek, sedangkan cat kuning memantulkan gelombang menengah ke atas. Jika keduanya dicampur, yang tersisa hanyalah gelombang di sekitar hijau yang sama-sama dipantulkan keduanya. Karena itu biru + kuning yang menjadi abu-abu pada rata-rata layar menjadi kehijauan pada cat.

Metode cat pada kalkulator ini mengikuti prosedur perhitungan yang dipublikasikan Scott Allen Burns. Pertama, setiap warna diubah menjadi 36 nilai reflektansi dengan membagi cahaya tampak 380~730 nm per 10 nm. Karena ada tak terhingga kurva yang menghasilkan RGB yang sama, dipilih kurva yang paling mulus (jumlah kuadrat selisih logaritma nilai bertetangga paling kecil, dengan reflektansi antara 0 dan 1). Lalu kedua kurva dicampur per panjang gelombang dengan rata-rata geometrik berbobot, yaitu reflektansi A^{1 − t} × reflektansi B^t (t adalah porsi B), dan sRGB dihitung kembali dengan fungsi pencocokan warna CIE 1931 serta cahaya siang D65.

Rata-rata geometrik adalah perkalian, sehingga warna yang gelap berpengaruh besar. Jumlah cahaya (luminans relatif) biru #0000FF kurang dari sepersepuluh kuning, jadi bila dicampur setengah-setengah, hasilnya masih biru kehijauan yang condong ke biru. Makin banyak kuning ditambahkan, warnanya bergeser ke hijau.

Tabel campuran kombinasi populer

Semua tabel di bawah ini adalah hasil pencampuran 50 : 50. Pada baris yang sama, warnanya bisa sangat berbeda menurut metode, jadi lihat kolom yang sesuai dengan tempat hasilnya akan dipakai. Ketuk "Kombinasi populer" pada kalkulator di atas untuk langsung memuat kombinasi yang sama.

Pada kolom cat, merah + hijau menjadi cokelat dan merah + biru menjadi ungu tua. Arahnya sama dengan hasil yang biasa kita lihat saat mencampur dua cat sungguhan. Kolom cahaya pada kombinasi mana pun sama dengan atau lebih terang daripada rata-rata layar.

Mengapa warna menjadi kusam jika dicampur di layar

Warna kusam berarti kromanya rendah. Peta jalur pencampuran adalah bidang a·b OKLab, yaitu ruang warna yang dilihat dari atas: makin dekat ke tengah makin abu-abu, dan makin dekat ke pita luar makin cerah. Rata-rata layar menghubungkan A dan B secara lurus di dalam kubus RGB, sehingga pada dua warna yang hampir berlawanan, jalurnya melewati abu-abu di tengah. OKLCH berputar mengikuti keliling roda warna, sehingga kromanya terjaga.

Angka dalam kurung adalah perbandingan terhadap rata-rata kroma kedua warna. Jika setiap tahap harus terlihat jelas seperti pada grafik, OKLCH lebih cocok. Metode cahaya menjaga kroma pada pasangan yang bukan komplementer, seperti merah + biru, tetapi pasangan komplementer seperti biru + kuning menjadi abu-abu, sama seperti rata-rata sRGB. Namun OKLCH mudah melewati batas warna yang bisa ditampilkan layar di antara dua warna cerah, sehingga bisa muncul nilai yang dipotong, seperti OKLCH biru + kuning pada tabel di atas.

Saat mencampur putih atau hitam (tint dan shade)

Warna yang dibuat pucat dengan menambahkan putih disebut tint, dan warna yang digelapkan dengan hitam disebut shade. Pada rata-rata layar, warna memucat merata sebanding dengan putih yang ditambahkan, tetapi pada metode cat, putih yang dibutuhkan cukup banyak sebelum warnanya berubah menjadi merah muda.

Hitam justru sangat kuat pada metode cat. Putih yang dicampur hitam hanya 10% sudah menjadi #A9A9A9, pada 25% menjadi #595959, dan jika setengah-setengah menjadi #191919 yang hampir hitam. Dengan rata-rata layar, porsi yang sama menghasilkan #E6E6E6, #BFBFBF, dan #808080. Pada cat sungguhan pun, hitam biasanya ditambahkan sedikit demi sedikit.

Memakainya dengan color-mix() di CSS

Di CSS, Anda menulis ruang warna untuk pencampuran dan dua warnanya, seperti color-mix(in oklab, #3498DB, #E74C3C). Baris CSS pada kartu hasil membuat kode ini dengan ruang yang sesuai dengan metode pilihan Anda (srgb-linear, srgb, oklab, oklch). Persentase diatur seperti berikut.

Draf CSS Color 5 menetapkan bahwa jika ruang warna dihilangkan, pencampuran memakai oklab, tetapi mengingat peramban lama, lebih aman menuliskan in oklab secara eksplisit. Ruang koordinat polar (oklch, hsl) memutar sudut rona lewat sisi yang lebih pendek, dan jika ditulis seperti in oklch longer hue, ia memutar lewat sisi yang lebih panjang.

Kesalahan yang sering terjadi

• Mengira rata-rata HEX sebagai hasil cat: Biru + kuning menjadi abu-abu bukan karena salah hitung, melainkan sifat rata-rata layar. Jika ingin tahu hasil cat, lihat baris cat.
• Membaca porsi terbalik: Di kalkulator ini maupun di CSS, porsi B 30% berarti A 70%. Pada color-mix(), persentase adalah bagian warna yang tepat di depannya.
• Menganggap pencampuran cahaya sebagai penjumlahan: Jika cahaya merah dan hijau dinyalakan bersamaan, hasilnya kuning #FFFF00, tetapi metode cahaya di kalkulator ini adalah rata-rata dua cahaya yang dinyalakan sesuai porsinya, sehingga hasilnya #BCBC00.
• Mempercayai hasil OKLCH begitu saja: Di antara dua warna cerah, jalurnya mudah keluar dari sRGB. Jika kartu hasil menampilkan keterangan bahwa nilainya dipotong, warna yang benar-benar tampil di layar adalah HEX tersebut.
• Menambahkan terlalu banyak hitam: Pada metode cat, putih yang dicampur hitam 30% sudah menjadi abu-abu tua #474747, dan merah yang hanya diberi hitam 10% menjadi segelap #AA0D0B (rata-rata layar #E60000). Saat menggelapkan, mulailah dari kurang dari 10% lalu tambahkan sedikit demi sedikit.
• Berharap beberapa tetes putih membuat warna pastel: Pada metode cat, untuk mengubah merah menjadi merah muda dibutuhkan putih sekitar 75%.

Keterbatasan dan hal yang perlu diperhatikan

• Metode cat adalah aproksimasi yang menganggap warna layar sebagai cat rekaan dengan "reflektansi paling mulus". Cat sungguhan berbeda kurva pantul dan daya warnanya (kekuatan menarik warna saat dicampur) menurut pigmen, sehingga HEX yang sama bisa memberi hasil berbeda menurut merek dan pigmen.
• Kanal bernilai 0 dihitung sebagai 0,0001, sehingga hitam murni #000000 pun diperlakukan sebagai cat sangat gelap dengan reflektansi 0,0001. Porsi di kedua ujung, 0% dan 100%, mengembalikan warna yang dimasukkan apa adanya.
• Jika hasil keluar dari gamut layar (sRGB), kanal dipotong ke 0~255 saat ditampilkan. Ini sama dengan cara Chrome 151 menggambar hasil color-mix(), dan bisa berbeda dari cara penurunan kroma yang dianjurkan CSS Color 4.
• Transparansi diabaikan, dan dua warna dicampur sebagai warna solid. Jika warna semitransparan dimasukkan, muncul keterangan bahwa transparansi diabaikan.
• Warna di layar bisa tampak berbeda menurut gamut dan pengaturan kecerahan monitor. Jika membutuhkan warna cetak, periksa dengan konverter CMYK sesuai kondisi cetak Anda.

Dasar perhitungan: metode cat memakai prosedur kurva reflektansi (380~730 nm, 10 nm) dan rata-rata geometrik berbobot dari Scott Allen Burns, fungsi pencocokan warna CIE 1931 2°, dan cahaya siang D65; empat metode lainnya memakai definisi color-mix() pada CSS Color 4 dan 5. Hasil CSS diperiksa pada Chrome 151 tanggal 21 Oktober 2026.

Sumber

• 01Scott Allen Burns — Subtractive Color Mixture ComputationProsedur mengubah RGB menjadi kurva reflektansi, mencampurnya dengan rata-rata geometrik berbobot, lalu mengembalikannya ke RGB; contoh biru + kuning
• 02Scott Allen Burns — Generating Reflectance Curves from sRGB Triplets36 titik pada 380~730 nm per 10 nm, kurva paling mulus (LLSS, ILLSS), reflektansi 0~1
• 03W3C — CSS Color Module Level 5Sintaks color-mix(), oklab bila metode dihilangkan, normalisasi persentase, dan alfa bila jumlahnya kurang dari 100%
• 04W3C — CSS Color Module Level 4Ruang interpolasi warna bawaan Oklab, nilai bawaan interpolasi sudut rona shorter, fungsi transfer sRGB, dan matriks konversi OKLab
• 05CIE — CIE 1931 colour-matching functions, 2 degree observerData fungsi pencocokan warna untuk mengubah kurva reflektansi menjadi XYZ
• 06CIE — Components of relative spectral distribution of daylightKomponen S0, S1, S2 pembentuk distribusi spektral cahaya siang D65 (6504 K)
• 07Björn Ottosson — A perceptual color space for image processingDefinisi dan tujuan perancangan ruang warna OKLab
• 08MDN — color-mix()Contoh sintaks dan dukungan peramban (Chrome 111, Firefox 113, Safari 16.2)

Pertanyaan yang sering diajukan

Alat yang sering dipakai bersama