Apa itu Pencampur Warna?

Campur dua warna dengan slider rasio dan lihat hasilnya secara real-time. Menampilkan nilai HEX, RGB, dan HSL yang bisa langsung disalin ke kode atau alat desain Anda.

Pilih dua warna, pilih mode mix — RGB, RYB, LAB, LCH, HSL, atau OKLCH — lalu geser rasio dari 0% sampai 100%. RGB merata-rata langsung di ruang layar, paling cepat tapi titik tengah bisa kusam; RYB mencampur seperti cat sungguhan, jadi biru dan kuning jadi hijau, merah dan kuning jadi oranye; LAB dan LCH mencampur di ruang perseptual sehingga gradien antar keluarga warna terasa lebih halus; OKLCH adalah model perseptual paling baru yang selaras dengan spesifikasi CSS color-mix dan biasanya memberi titik tengah dengan tampilan paling alami. Hasilnya keluar dalam HEX, RGB, HSL, CMYK, dan nama warna terdekat, ditambah pembacaan kontras WCAG di atas putih dan hitam serta gradien linear CSS yang siap disalin. Tombol cepat 25, 50, dan 75 persen melompat ke titik mix yang umum dipakai tanpa menggeser slider secara presisi.

Cara menggunakan

1. Langkah 1 — Pilih warna pertama menggunakan pemilih warna atau masukkan nilai HEX-nya.
2. Langkah 2 — Pilih warna kedua, lalu sesuaikan slider rasio campuran untuk mengontrol perpaduan (0% = warna pertama murni, 100% = warna kedua murni).
3. Langkah 3 — Lihat hasil campuran beserta kode warnanya dan salin nilai yang Anda butuhkan.

Kapan menggunakan

• Membangun status hover dan disabled dengan mencampur warna merek dengan putih atau abu.
• Menyiapkan stop tengah untuk gradien CSS agar bagian tengah tidak kusam.
• Memperoleh aksen lebih lembut dengan mencampur dua warna merek pada rasio rendah untuk callout halus.

Hasil

Seorang desainer mencampur brand blue (#2196F3) dengan putih (#FFFFFF) pada 30% untuk membuat tint halus (#A1C9F8) untuk efek hover pada UI kit.

FAQ

Mode mix apa yang biasanya dipakai?

Kalau pipeline build kamu mendukung, pilih OKLCH — paling seragam secara perseptual dan selaras dengan spesifikasi CSS color-mix modern. Setelah itu LAB jadi alternatif terbaik dan didukung luas di alat desain. RGB cocok kalau kedua warna punya kecerahan serupa; LCH paling baik menjaga chroma; HSL lebih pas untuk perputaran hue ketimbang interpolasi yang halus.

Kenapa titik tengah di RGB kadang terlihat abu atau kusam?

RGB merata-rata angka, bukan persepsi. Warna komplementer seperti biru dan oranye saling menetralkan kanal R, G, dan B sehingga titik tengahnya jadi abu dengan saturasi rendah. Ganti ke LAB atau LCH dan titik tengah tetap saturasi tinggi. Untuk hasil seperti mencampur cat sungguhan, pakai mode RYB — biru dan kuning dicampur jadi hijau, bukan abu.

Apa bedanya dengan CSS `color-mix()`?

color-mix() sudah tersedia di browser modern dan mendukung srgb, lab, oklab, lch, oklch. Alat ini mengeluarkan HEX yang bisa ditempel ke stylesheet lama, dan menyediakan slider visual sehingga rasionya tidak perlu ditebak persentase.

Bisakah saya mencampur lebih dari dua warna?

Tidak dalam satu langkah, tapi bisa dirangkai: campur A dan B untuk dapat C, lalu campur C dengan D. Untuk gradien tiga warna yang halus, campur A→B di 50% dan B→C di 50%, kemudian pakai dua titik tengah itu sebagai stop yang mengapit B aslinya.

Apa arti rasio 0% versus 100%?

0% memberi Color 1 murni, 100% memberi Color 2 murni, 50% adalah titik tengah. Slider bergerak per 1%, jadi Anda bisa menyetel tint atau shade dengan presisi — pada state UI, campuran 10% terasa berbeda dengan 15%.

Alat terkait