Lewati ke konten
Toolars
Jelajahi
Laporkan bug

Desain · utilitas Lokal

Pencampur Warna

Color Mixer

Campur dua warna HEX — termasuk yang translusen — dalam sRGB dengan bobot yang dapat diatur, lalu salin hasilnya sebagai HEX, RGBA, CSS, atau JSON.

Jalur tugas / dari masukan ke hasil

Masukkan kedua warna

Berjalan lokal · Tidak ada yang diunggah

Cara kerja Pencampur Warna, privasi, dan alat terkait

Jalur tugas / dari masukan ke hasil

Cara mencampur dua warna

  1. 01

    Masukkan kedua warna

    Isi Warna pertama dan Warna kedua dengan nilai heksa — #RGB, #RGBA, #RRGGBB, dan #RRGGBBAA semuanya diterima, jadi masukan translusen pun tidak masalah. Ruang kerja terbuka dengan #6D5EF8 berhadapan dengan #22C55E.

  2. 02

    Metode perhitungan

    Pilih Metode perhitungan: Campuran berbobot menginterpolasi kanal sRGB terenkode dengan alpha prakalikan. Komposit meletakkan warna pertama di atas warna kedua; urutan lapisan berpengaruh dan mode ini tidak memiliki penggeser bobot.

  3. 03

    Campur warnanya

    Dalam Campuran berbobot, atur bobot warna kedua dari 0% (hanya warna pertama) sampai 100% (hanya warna kedua), lalu tekan Campur warna. Dalam Komposit, tombol yang sama menumpuk warna. Mengubah warna, metode, atau bobot menghapus hasil lama.

  4. 04

    Baca panel hasilnya

    HEX, RGBA, CSS, dan pratinjau memakai kanal dan alpha 8 bit yang sama. Transparansi terlihat di atas halaman; alpha tetap ada pada keluaran.

  5. 05

    Coba campuran contoh

    Tekan Muat contoh untuk mencampur #F97316 dengan #7C3AED pada bobot 35% — oranye hangat yang bergeser ke arah violet — agar Anda bisa melihat seluruh alurnya. Atur ulang mengembalikan pasangan default pada 50%.

  6. 06

    Salin atau unduh hasilnya

    Salin atau unduh toolars-color-mix.json berisi kedua warna sumber, metode, ruang sRGB, HEX, RGBA, dan deklarasi CSS. secondColorWeight hanya untuk campuran berbobot. Semua bentuk keluaran memakai hasil 8 bit yang sama.

Fakta alat

Pemrosesan
Di browser Anda
Input meninggalkan perangkat
Tidak pernah
Retensi
Tidak ada yang disimpan
Harga
Gratis

Masukan Anda tetap di peramban.

Pencampur Warna menggunakan jalur eksekusi lokal terverifikasinya dan tidak membuat riwayat masukan atau keluaran tersembunyi.

Eksekusi lokal

Berjalan di dalam tab peramban saat ini.

Tanpa pemrosesan tersembunyi

Data alat aktif tidak pernah menjadi catatan dokumen Toolars.

Tanpa perlu akun

Gunakan alur kerja inti tanpa membuat profil. Favorit disinkronkan ke akun Anda setelah masuk.

Atur ulang seketika

Bersihkan tab dan data kerja aktif pun hilang.

Apa yang sebenarnya dilakukan Pencampur Warna

Untuk warna peralihan antara ungu dan hijau merek, gunakan Campuran berbobot lalu atur persentase warna kedua. Untuk menguji lapisan tembus pandang di atas latar, gunakan Komposit dengan lapisan sebagai warna pertama dan latar sebagai warna kedua. Periksa alpha dan pratinjau pada latar tujuan sebelum mengekspor JSON; kedua metode menjawab kebutuhan berbeda.

Pertanyaan umum

Bagaimana cara kerja slider bobot?
Penggeser hanya muncul pada Campuran berbobot. Pada 0% hasilnya warna pertama, pada 100% warna kedua. Di antaranya, kanal sRGB terenkode diinterpolasi dengan alpha prakalikan lalu dibulatkan ke 8 bit. Komposit mengabaikan bobot dan menempatkan warna pertama di atas warna kedua.
Apakah pencampurnya menangani transparansi?
Ya. Campuran berbobot memakai alfa praperkalian; komposit menempatkan warna pertama di atas kedua. Bandingkan alfa dan urutan lapisan pada latar tujuan.
Bagaimana kanal-kanalnya dibulatkan?
HEX, RGBA, CSS, dan pratinjau memakai kanal dan alpha 8 bit yang sama. Transparansi terlihat di atas halaman; alpha tetap ada pada keluaran.
Mengapa panel hasilnya terhapus?
Mengubah salah satu warna, metode perhitungan, atau bobot akan menghapus hasil lama agar tidak dikira sesuai dengan pengaturan saat ini. Tekan Campur warna lagi untuk hasil baru.
Apa persisnya isi ekspornya?
Salin atau unduh toolars-color-mix.json berisi kedua warna sumber, metode, ruang sRGB, HEX, RGBA, dan deklarasi CSS. secondColorWeight hanya untuk campuran berbobot. Semua bentuk keluaran memakai hasil 8 bit yang sama.
Apakah datanya dikirim ke mana pun?
Tidak. Campuran dihitung sepenuhnya di tab peramban ini, masukan dan hasil tidak pernah keluar dari tab ini, dan tidak diperlukan akun.

Baca juga

Lanjutkan di Desain

Tugas terkait, bukan jalan buntu.

Pindah ke ruang kerja terfokus lainnya tanpa kembali ke indeks lengkap.

Generator Loader CSS

CSS Loader Generator

Rancang loader CSS cincin orbit atau tiga titik dengan ukuran, durasi, dan warna yang dapat disetel, lalu salin kode lengkap dengan blok prefers-reduced-motion.

Buat

Generator Checkbox CSS

CSS Checkbox Generator

Beri gaya kotak centang HTML asli dengan ukuran, border, dan warna pilihan, lalu salin CSS yang mempertahankan fokus keyboard dan status disabled.

Buat

Generator Switch CSS

CSS Switch Generator

Rancang sakelar alih murni CSS dengan geometri lintasan dan kenop yang dapat diukur, lalu salin kodenya dengan dukungan reduced-motion — tanpa JavaScript.

Buat

Generator Clip Path CSS

CSS Clip Path Generator

Edit titik poligon dengan menyeret, papan ketik, atau koordinat. Mulai dari empat prasetel dan salin deklarasi clip-path atau CSS lengkap secara lokal.

Buat