Mixer Warna
Campurkan dua warna dan dapatkan campuran plus setiap langkah di antara mereka dalam HEX, RGB dan HSL. Pilih pencampuran sRGB, linear-RGB atau perceptual OKLab, atur opacity per-warna, dan salin gradient CSS yang sesuai.
Input
Pilih warna, atau ketik nilai HEX langsung.
Berapa banyak warna perantara yang dihasilkan. Dua warna asli selalu disertakan.
sRGB cocok dengan sebagian besar mixer; OKLab menjaga kecerahan merata dan menghindari mid-tone yang kusam.
Output
Dua warna yang dicampur dalam bagian yang sama.
Your color palette will appear here.
Setiap perhitungan berhenti ditulis, sehingga ramp linear-RGB atau OKLab bertahan dalam CSS biasa.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/color-mixer \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"startColor": "#2563eb",
"startOpacity": "100",
"endColor": "#f59e0b",
"endOpacity": "100",
"steps": "3",
"colorSpace": "srgb"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `color-mixer` tool (Color Mixer) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/color-mixer/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Mixer Warna — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa yang dilakukan alat ini
Mixer Warna mencampur dua warna dan menunjukkan kepada Anda semuanya di antara mereka. Pilih warna awal dan warna akhir, pilih berapa banyak langkah yang Anda inginkan, dan Anda mendapatkan campuran 50/50, ramp lengkap warna perantara dalam HEX, RGB dan HSL, dan gradient CSS siap tempel yang membawa perhentian yang sama.
Ini adalah setara digital dari mencampur dua cat — kecuali Anda dapat melihat setiap nuansa perantara sekaligus, menyalin salah satu dengan klik, dan mengontrol dengan tepat bagaimana dua warna dirata-ratakan.
Cara menggunakannya
- Atur Warna Awal dan Warna Akhir (gunakan pemilih, atau ketik nilai HEX).
- Seret Langkah di Antaranya untuk berapa banyak warna perantara yang Anda inginkan. Dua warna asli selalu disertakan.
- Secara opsional turunkan Opacity Awal atau Opacity Akhir untuk mencampur warna translucent.
- Salin campuran 50/50, klik sampel apa pun untuk menyalin HEX-nya, atau ambil gradient CSS.
Semuanya berjalan di browser Anda — tidak ada upload, tidak ada akun, tidak ada batasan.
Memilih ruang warna pencampuran
Ini adalah pengaturan yang paling banyak mixer warna tidak memberikan Anda, dan itu mengubah hasil banyak.
- sRGB merata-ratakan nomor saluran mentah. Ini adalah apa yang hampir setiap mixer lakukan, dan cocok dengan apa yang diharapkan orang — tetapi percikan melalui dua warna jenuh sering kali jatuh ke tengah yang kusam dan gelap.
- Linear RGB mengkonversi keluar dari kurva gamma sRGB terlebih dahulu, mencampur cahaya aktual, kemudian mengkonversi kembali. Ini adalah bagaimana cahaya secara fisik menggabungkan, jadi tengahnya tetap lebih terang.
- OKLab mencampur dalam ruang yang seragam secara perceptual. Kecerahan dan nada bergerak pada tingkat visual yang stabil, jadi ramp terlihat berjarak merata ke mata — pilihan terbaik untuk skala sistem desain dan gradien.
Biru ke kuning adalah tes klasik: dalam sRGB titik tengah bergerak menuju abu-abu, sementara OKLab menjaganya terlihat seperti transisi nyata.
Mengapa gradient CSS mencantumkan setiap perhentian?
Browser yang menginterpolasi dua-perhentian linear-gradient() melakukannya dalam sRGB. Jika Anda mencampur dalam Linear RGB atau OKLab, dua-perhentian gradient akan membuangnya. Menuliskan setiap perhentian yang dihitung memperbaiki ramp yang Anda pilih sebenarnya, dan itu bekerja di setiap browser.
Apa arti nilai hex 8-digit?
Ketika warna yang dicampur berakhir translucent, alat ini beralih ke #rrggbbaa (dan rgba() / hsla()), di mana pasangan terakhir adalah saluran alpha. Warna yang sepenuhnya opak tetap dalam bentuk 6-digit yang familiar. Opacity selalu dicampur secara linear, terlepas dari ruang warna yang Anda pilih.
Bagaimana jika saya menginginkan nuansa satu warna alih-alih campuran dua?
Gunakan Generator Warna Tint & Shade, yang mencampur warna dasar tunggal menuju putih dan hitam. Untuk gradient multi-perhentian dengan sudut dan posisi, coba Generator Gradient CSS, dan untuk menarik warna dari gambar yang ada gunakan Ekstrak Palet Warna.