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

Generator Konfigurasi Webpack

Buat webpack.config.js untuk webpack 5 bagi JavaScript biasa, React, atau Vue: TypeScript, Babel, CSS atau Sass, gambar, HtmlWebpackPlugin, server pengembangan, dan baris npm install.

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.

Validator OpenAPI

Tempel dokumen OpenAPI atau Swagger dalam JSON atau YAML dan periksa struktur intinya: bidang versi, objek info, dan paths, dengan galat dan peringatan yang jelas.

Pemformat PHP

Tambahkan baris baru dan indentasi 2 atau 4 spasi ke cuplikan PHP sederhana. Periksa hasilnya: alat ini bukan parser PHP dan tidak menerapkan PSR-12.

Generator Loader CSS

Buat spinner lingkaran CSS murni: atur diameter, ketebalan border, warna dan kecepatan rotasi, lihat pratinjau langsung, lalu salin CSS siap pakai. Tanpa SVG, tanpa JavaScript.

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.

Alat ini tersedia dalam bahasa lain