Softonic

Pencampur warna

Langkah 1 / 2
Hasil

Masukkan dua warna HEX, pilih jumlah langkah, lalu Pencampur warna menampilkan warna awal, warna akhir, dan warna yang terbagi merata di antaranya. Ini berguna untuk ramp UI cepat, perencanaan gradien, status ikon, dan memeriksa stop HEX yang tepat sebelum dipakai di CSS atau file desain.

Cara menghitung campuran HEX

  1. 1

    Masukkan dua warna HEX

    Gunakan HEX 3 atau 6 digit, dengan atau tanpa #. Contoh: #FF6B35, #1E3A8A, F60.

  2. 2

    Pilih 2-20 langkah

    Contoh warna pertama adalah warna pertama dan contoh terakhir adalah warna kedua; contoh di tengah dihitung di antara keduanya.

  3. 3

    Interpolasikan kanal RGB

    Alat mengubah HEX menjadi nilai kanal merah, hijau, dan biru, menginterpolasi tiap kanal secara linear, lalu membulatkan ke bilangan bulat terdekat.

  4. 4

    Baca stop HEX

    Setiap contoh warna ditampilkan dengan kode HEX 6 digit huruf besar yang bisa dipilih dan digunakan lagi dalam desain atau lembar gaya.

Apa yang dilakukan alat ini

Pencampur warna hanya bekerja dengan notasi warna HEX standar. Alat ini menerima HEX pendek seperti #F60 dan HEX lengkap seperti #FF6B35, menormalkan nilai secara internal, lalu menampilkan setiap hasil sebagai kode HEX 6 digit huruf besar.

Campuran memakai interpolasi linear sederhana pada kanal RGB/sRGB:

  1. Ubah setiap warna HEX menjadi nilai R, G, dan B dari 0 sampai 255.
  2. Untuk setiap langkah, hitung t dari 0 sampai 1.
  3. Untuk setiap kanal, gunakan awal + (akhir - awal) * t.
  4. Bulatkan setiap kanal ke bilangan bulat terdekat dan ubah hasilnya kembali ke HEX.

Karena warna ujung disertakan, 2 langkah berarti “hanya awal dan akhir”. Dengan 7 langkah dari #FF6B35 ke #1E3A8A, hasilnya:

Langkah Posisi HEX
1 0% #FF6B35
2 16,67% #DA6343
3 33,33% #B45B51
4 50% #8F5360
5 66,67% #694A6E
6 83,33% #44427C
7 100% #1E3A8A

Penggunaan yang cocok

  • Ramp status UI: buat warna perantara untuk hover, aktif, terpilih, atau nonaktif.
  • Perencanaan gradien: tentukan stop HEX yang tepat sebelum menulis gradien CSS di alat lain.
  • Varian ikon dan ilustrasi: jaga konsistensi sekumpulan kecil warna yang saling terkait.
  • QA desain: bandingkan titik tengah yang dihitung per kanal, bukan menebak dari tampilan mata.

Batasan yang perlu diingat

Pencampur ini tidak menerima rgb(), hsl(), nama warna, nilai alpha, atau HEX 8 digit. Alat ini tidak mengekspor RGB, HSL, LAB, LCH, snippet CSS, pemeriksaan kontras, atau penilaian aksesibilitas. Jika membutuhkannya, gunakan konverter, pemeriksa kontras, atau generator gradien setelah mendapatkan stop HEX.

Pertanyaan yang Sering Diajukan

Hanya HEX: 3 atau 6 digit, dengan atau tanpa # di depan. Alat ini tidak membaca rgb(), hsl(), kanal alpha, atau nama warna.

Ya. Langkah pertama adalah warna pertama dan langkah terakhir adalah warna kedua. Langkah lainnya adalah warna hasil interpolasi di antara keduanya.

Campuran dihitung kanal demi kanal dalam RGB/sRGB. Cara ini mudah diprediksi dan dipakai ulang dalam kode, tetapi tidak sama dengan interpolasi perseptual LAB atau LCH.

Tidak. Alat ini hanya menampilkan contoh warna dan kode HEX. Gunakan nilai HEX yang dihasilkan di CSS Anda atau kirim ke pemeriksa kontras jika rasio aksesibilitas penting.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Penghitung FPS

Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.

Generator Warna Acak

Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.

Pemformat JSON

Tempel JSON untuk dirapikan dengan indentasi 2 atau 4 spasi, dipadatkan menjadi output ringkas, atau diperiksa sintaksnya sebelum hasilnya disalin.

Pemilih Warna HEX

Pilih atau masukkan warna HEX untuk mendapatkan RGB, HSL, perkiraan CMYK, luminans relatif, serta kontras terhadap putih dan hitam.