Pencampur Warna

Pencampur warna online gratis untuk cat atau cahaya

Pencampur warna ini menggabungkan dua warna — atau lebih — menjadi warna baru dan menampilkan gradien penuh dari langkah-langkah di antaranya. Pilih warna lewat swatch, ketik kode hex, atau ambil sampel langsung dari gambar yang Anda unggah, lalu baca hasil campurannya dalam format HEX, RGB, HSL, dan CMYK. Semuanya berjalan di browser Anda, sehingga hasilnya instan dan tidak ada apa pun yang diunggah ke server mana pun.

Kebanyakan alat sejenis hanya melakukan satu jenis campuran linear datar. Alat ini memungkinkan Anda mencampur dua warna online dengan tiga cara berbeda dan memperlihatkan perbedaannya secara langsung — jadi Anda mendapatkan jawaban yang diharapkan seorang pelukis, jawaban yang dihasilkan layar, atau titik tengah matematis murni untuk gradien dan design system.

Subtraktif, aditif, atau blend biasa — tiga model pencampuran

Pencampuran subtraktif memodelkan cat dan pigmen: warna menyerap (mengurangi) cahaya, sehingga biru + kuning = hijau, merah + kuning = oranye, dan merah + biru = ungu — hasil intuitif «dua warna apa yang menghasilkan X» yang sesuai dengan cat fisik, tinta, dan pencetakan CMYK. Pencampuran aditif memodelkan cahaya: kanal merah, hijau, dan biru saling menambah, sehingga merah + hijau = kuning dan ketiganya sekaligus menghasilkan putih — cara kerja layar, proyektor, dan lampu panggung.

Mode ketiga, Blend, adalah interpolasi linear murni yang merata-ratakan kanal RGB untuk menemukan titik tengah numerik yang tepat — ideal untuk gradien, tint UI, dan pembuatan design token. Satu tombol beralih di antara ketiganya, dan strip gradien langsung digambar ulang sehingga Anda bisa melihat campuran cat biru-ke-kuning melewati hijau yang realistis di tengah mode subtraktif, dibandingkan jalur yang sangat berbeda saat dicampur sebagai cahaya aditif.

Dua warna apa yang menghasilkan hijau, oranye, ungu, dan coklat?

Bagan pencampur warna bawaan menjawab pertanyaan pigmen yang paling banyak dicari dengan sekali ketuk: hijau dari biru + kuning, oranye dari merah + kuning, ungu dari merah + biru, teal dari biru + hijau, dan coklat realistis dari dua warna komplementer seperti oranye + biru. Ketuk pasangan mana pun pada bagan untuk memuatnya ke pencampur dalam mode Subtraktif dan melihat hasil hex serta kode warnanya secara persis.

Karena mesin subtraktif mencampur seperti pigmen sungguhan, warna sekunder keluar dengan benar dan warna tersier meredup secara alami menuju coklat — persis seperti keruhnya cat asli yang dicampur berlebihan. Slider rasio memungkinkan Anda mengontrol proporsi dengan presisi: 70% merah + 30% biru menghasilkan ungu yang lebih hangat dan condong magenta dibandingkan campuran 50/50, misalnya.

Campur dari gambar — dan campur lebih dari dua warna

Unggah foto apa pun dan gunakan eyedropper untuk mengambil sampel warna langsung darinya — sempurna untuk mencocokkan warna brand dari foto produk, contoh cat, atau gambar inspirasi. Pilih dua piksel atau lebih lalu campurkan. Gambar didekode secara lokal pada canvas HTML, jadi pencampur warna dari gambar di sini berarti file Anda tidak pernah meninggalkan perangkat — cocok untuk aset brand rahasia maupun mockup desain yang belum dirilis.

Perlu menggabungkan lebih dari dua? Klik 'Add color' untuk menambahkan swatch ketiga, keempat, kelima, atau keenam, masing-masing dengan slider bobotnya sendiri. Alat ini mengembalikan campuran berbobot dari semua input — berguna untuk merata-ratakan sebuah palet, meniru campuran cat multi-pigmen, atau menemukan pusat visual dari sekumpulan warna brand.

Perbandingan dengan Adobe Color, Coolors, dan colordesigner.io

Adobe Color (color.adobe.com) dibuat untuk eksplorasi harmoni warna — komplementer, triadik, analog — dan memerlukan akun Adobe yang menyinkronkan data ke server Adobe. Ia tidak punya model pencampuran subtraktif (cat) atau aditif (cahaya) dan tidak punya slider rasio untuk memadukan kode hex tertentu. Coolors (coolors.co) sangat bagus untuk membuat palet, tetapi pencampurnya hanya melakukan blend linear dasar — setara mode 'Blend' di alat ini — tanpa fisika cat atau cahaya dan tanpa pengambilan sampel dari gambar.

colordesigner.io menawarkan blend linear dua warna beserta strip gradien, tetapi hanya menampilkan hex — tanpa RGB, HSL, atau CMYK — dan tidak memiliki model pencampuran berbasis fisika maupun pengambilan sampel gambar. Alat ini mengisi celah tersebut: tiga model pencampuran (subtraktif, aditif, linear), empat format keluaran sekaligus (HEX, RGB, HSL, CMYK), sampel warna dari gambar, hingga enam warna dengan slider bobot masing-masing, dan URL yang bisa dibagikan. Tanpa akun, tanpa batas penggunaan, tanpa unggahan ke server — semuanya gratis dan berjalan lokal.

Mengapa fisika aditif dan subtraktif berbeda

Pencampuran warna aditif adalah fisika cahaya. Saat Anda mengarahkan tiga lampu sorot berwarna ke titik yang sama di dinding putih — satu merah, satu hijau, satu biru — masing-masing menambahkan foton dengan panjang gelombang tertentu. Cahaya merah + hijau menghasilkan kuning; merah + biru menghasilkan magenta; hijau + biru menghasilkan cyan; ketiganya pada intensitas penuh menghasilkan putih. Monitor komputer, layar smartphone, televisi, proyektor, dan lampu LED semuanya bekerja dengan prinsip ini. Tiga warna primernya adalah merah, hijau, dan biru karena sesuai dengan tiga jenis sel kerucut di retina manusia — kerucut L (long), M (medium), dan S (short) — sehingga mencampur ketiga wilayah panjang gelombang itu memberikan gamut warna terluas yang bisa dipersepsikan.

Pencampuran warna subtraktif adalah fisika pigmen dan tinta. Pigmen kuning terlihat kuning karena menyerap cahaya bergelombang pendek (biru) dan memantulkan sisanya; pigmen cyan menyerap cahaya bergelombang panjang (merah). Saat keduanya dicampur, kedua penyerapan berlaku sekaligus — pigmen gabungan menyerap biru sekaligus merah, memantulkan terutama hijau. Itulah mengapa cyan + kuning = hijau pada tinta dan cat, dan mengapa pencetakan CMYK menggunakan cyan, magenta, dan kuning sebagai warna primer: masing-masing mengurangi sepertiga spektrum tampak. Ketiga tinta bersama-sama menyerap hampir semua cahaya tampak dan menghasilkan warna mendekati hitam — itulah sebabnya percetakan profesional menambahkan tinta hitam khusus (kanal K, singkatan dari Key) alih-alih mencampur CMY. Tinta hitam menghasilkan hitam yang lebih pekat, jauh lebih hemat tinta warna, dan lebih cepat kering.

Adapun «warna primer» yang diajarkan di sekolah dasar — merah, kuning, dan biru (RYB) — berasal dari tradisi melukis pra-industri yang mendahului pemahaman ilmiah tentang persepsi warna. RYB adalah pendekatan praktis, tetapi bukan deskripsi paling akurat untuk cahaya (primernya RGB) maupun pencetakan (primernya CMY). Alat di halaman ini memberi Anda akses ke model aditif (RGB) dan subtraktif (berbasis CMY) yang berlandaskan sains, bukan aproksimasi RYB historis.

Ruang warna, gamma, OKLCH, dan CSS Color 4

Saat Anda mengetik warna hex seperti #3B82F6, Anda menyatakan nilai sRGB: tiga bilangan bulat 8-bit, masing-masing 0 sampai 255, yang mengodekan seberapa banyak cahaya merah, hijau, dan biru yang dipancarkan layar — total 16,7 juta kombinasi. Representasi HSL menggambarkan warna yang sama secara berbeda: Hue (0–360°, posisi pada roda warna), Saturation (0–100%), dan Lightness (0–100%). Untuk pengukuran perbedaan warna yang akurat, desainer dan insinyur menggunakan ruang warna CIE Lab yang dirancang seragam secara perseptual; metrik Delta-E (ΔE) mengukur jarak antara dua titik di ruang Lab. ΔE 1,0 adalah perbedaan yang baru bisa dilihat pengamat terlatih; ΔE di bawah 2,0 umumnya dapat diterima untuk pencocokan warna produksi di percetakan dan manufaktur; ΔE di atas 5,0 adalah ketidakcocokan yang terlihat siapa pun.

Kesalahan paling umum dalam pencampuran warna secara terprogram adalah memadukan nilai hex sRGB seolah-olah linear. Kode #808080 secara fisik hanya sekitar 21% seterang #FFFFFF, karena nilai sRGB dikodekan dengan gamma (fungsi transfer sekitar pangkat 2,2). Merata-ratakan hitam (#000000) dan putih (#FFFFFF) langsung pada nilai terkode menghasilkan #808080, yang tampak jauh lebih gelap dari abu-abu tengah perseptual. Pencampuran cahaya linear yang benar butuh tiga langkah: konversi kedua nilai sRGB ke cahaya linear, rata-ratakan, lalu terapkan kembali pengodean gamma — hasil campuran hitam-putihnya sekitar #BCBCBC. Inilah mengapa gradien yang dibuat dengan matematika RGB naif sering tampak kusam atau gelap di tengah.

Ruang warna OKLCH, diperkenalkan Björn Ottosson pada 2020 dan kini bagian dari spesifikasi CSS Color 4, dirancang khusus untuk manipulasi warna yang seragam secara perseptual: L (lightness), C (chroma), dan H (sudut hue 0–360°). Langkah numerik yang sama menghasilkan langkah perseptual yang kurang lebih sama — tidak seperti HSL, di mana pergeseran hue 30° di rentang kuning terlihat besar sedangkan di rentang biru nyaris tak terlihat. CSS Color 4 meresmikannya lewat fungsi native color-mix(), didukung semua browser utama sejak 2023: color-mix(in oklch, blue 50%, yellow 50%) menghasilkan hijau tengah yang bersih dan hidup, bukan hijau keabu-abuan hasil rata-rata RGB naif. Untuk pekerjaan UI, in oklch atau in oklab adalah pilihan default yang disarankan, dan color-mix(in oklch, red 30%, transparent) adalah cara standar untuk membuat merah dengan transparansi 70% tanpa JavaScript.

Semua kode siap disalin — plus tautan yang bisa dibagikan

Kartu hasil menampilkan nilai HEX, RGB, HSL, dan CMYK warna campuran beserta nama warna CSS terdekat, dan satu klik menyalinnya ke clipboard. Buat 2–20 swatch titik tengah berjarak sama di antara dua warna Anda, salin satu langkah, atau ambil seluruh urutan sekaligus untuk gradien CSS atau ramp warna design system. URL yang bisa dibagikan menyimpan warna, rasio, dan model Anda sehingga Anda dapat mengirim campuran yang persis sama ke rekan kerja atau klien untuk ditinjau.

Nilai CMYK yang ditampilkan dihitung langsung dari nilai RGB sebagai aproksimasi yang tidak bergantung perangkat; produksi cetak profesional tetap memerlukan konversi profil warna ICC yang tepat, tetapi untuk pengecekan cepat angka CMYK ini adalah acuan awal yang andal. Tidak ada yang perlu diinstal dan tidak ada akun yang perlu dibuat — pencampuran warna, pengambilan sampel gambar, dan konversi kode semuanya terjadi lokal di browser Anda. Tandai pencampur warna online ini dan padukan dengan Color Palette Generator serta Contrast Checker di UtiloKit untuk alur kerja warna lengkap tanpa unggahan. Setiap major design system, dari Tailwind CSS dengan 11 stop per warna hingga Material Design 3 dengan ruang warna HCT, dibangun di atas prinsip pencampuran perseptual yang sama dengan yang Anda eksplorasi di alat ini.