Fungsi alat ini
Cara kerja roda warna
Cara jenis palet dihitung
Penjelasan fitur
Pemilih warna dengan penanda yang dapat digeser
Seret penanda mengelilingi roda untuk mengubah rona dan saturasi secara langsung. Palet dihitung ulang setiap kali penanda bergerak sehingga Anda dapat melihat perubahan kombinasi sebelum memilih warna.
Masukan HEX dengan validasi
Ketik atau tempel kode HEX langsung (3 atau 6 digit, dengan atau tanpa #). Nilai yang tidak valid langsung ditandai, bukan dibiarkan gagal tanpa pemberitahuan.
Slider rona, saturasi, dan luminansi
Untuk penyesuaian presisi yang sulit dilakukan dengan mouse pada roda kecil, panel edit menyediakan slider terpisah untuk setiap nilai warna.
Lima jenis palet
Beralih antara komplementer, monokromatik, analog, triadik, dan tetradik tanpa memilih ulang warna dasar. Alat mempertahankan rona yang sama dan hanya mengubah rotasinya pada roda.
Salin dengan sekali klik
Klik sampel warna mana pun untuk menyalin kode HEX-nya, atau gunakan tombol di bawah palet untuk menyalin semua warna sekaligus sebagai daftar HEX atau properti kustom CSS yang siap ditempel (--color-1, --color-2, dan seterusnya).
Setiap sampel dapat diedit secara terpisah
Warna yang dihasilkan tidak terkunci pada rumus. Seret penanda mana pun pada roda atau arahkan kursor ke sampel lalu klik ikon penyesuaian untuk membuka slider rona, saturasi, dan luminansi khusus warna itu. Setelah dipindahkan, warna tetap di posisi yang Anda pilih dan hanya dihitung ulang saat jenis palet diubah.
Latar belakang mengikuti warna pilihan
Area di belakang pemilih warna akan berubah menjadi rona lembut dari warna dasar yang dipilih, sehingga Anda dapat melihat tampilannya pada bidang yang lebih besar, bukan hanya sebagai sampel kecil.
Unduh palet sebagai gambar
Selain menyalin kode HEX, Anda dapat mengunduh palet sebagai kartu gambar dalam format PNG, JPG, atau SVG. Ini memudahkan Anda membagikan palet di luar editor kode, misalnya dalam dokumen atau brief desain.
Untuk apa alat ini dapat digunakan?
Memilih skema warna situs web atau aplikasi
Pilih warna utama merek terlebih dahulu, lalu buat palet komplementer atau triadik untuk tombol, tautan, dan aksen.
Membangun palet sistem desain
Salin palet sebagai variabel CSS dan masukkan langsung ke stylesheet sebagai titik awal tema.
Memeriksa apakah dua warna terlihat bertabrakan
Tetapkan satu warna sebagai dasar dan lihat posisi warna lainnya pada roda. Warna yang berdekatan dengan sudut kecil lebih sulit dibedakan, sedangkan warna yang hampir berlawanan menghasilkan kontras paling tinggi.
Menjelajahi nuansa dan variasi satu warna
Pilih jenis monokromatik untuk mendapatkan versi lebih gelap dan lebih terang dari rona yang sama, cocok untuk status hover, garis tepi, atau variasi warna UI yang dinonaktifkan.
Informasi alat
| Masukan | Kode warna HEX yang diketik atau klik/seret pada roda |
|---|---|
| Keluaran | Kode HEX dan properti kustom CSS yang disalin ke clipboard, atau kartu palet yang diunduh sebagai PNG, JPG, atau SVG |
| Jenis palet | Komplementer, monokromatik, analog, triadik, tetradik |
| Pemrosesan | Sepenuhnya di browser—tanpa unggahan, akun, atau komunikasi bolak-balik dengan server |
| Model warna | HSL (rona, saturasi, kecerahan), dikonversi dari dan ke HEX |
Manfaat
- Tidak perlu akun atau pendaftaran—roda warna langsung berfungsi setelah halaman dimuat.
- Palet diperbarui secara instan saat penanda digeser, sehingga Anda dapat membandingkan pilihan dengan cepat.
- Menyalin sebagai variabel CSS menghemat waktu karena Anda tidak perlu mengganti nama atau memformat ulang kode HEX secara manual.
- Aturan matematis setiap jenis palet tetap dan konsisten, sehingga hasilnya dapat diprediksi setelah Anda memahami aturannya.
Batasan
- Roda hanya menampilkan rona dan saturasi; kecerahan harus diatur secara terpisah menggunakan slider.
- Alat ini membuat palet berdasarkan teori warna, tetapi tidak memeriksa rasio kontras atau kepatuhan terhadap aksesibilitas WCAG.
- Penyalinan ke clipboard memerlukan browser yang mendukung Clipboard API; tombol salin mungkin tidak berfungsi di browser yang sangat lama.
- File PNG/JPG/SVG yang diunduh berupa kartu palet sederhana dengan blok warna dan label HEX, bukan gambar roda interaktif.
- Menyeret penanda sampel hanya mengubah rona dan saturasi secara langsung; nilai kecerahan tetap mengikuti hasil perhitungan sampai disesuaikan melalui slider Luminansi.
Privasi
Warna, kode HEX, maupun palet yang Anda buat tidak dikirim ke mana pun. Semua perhitungan berjalan secara lokal di tab browser. Jika halaman ditutup atau dimuat ulang, data akan dihapus.
Pengelolaan Data
Alat ini tidak menggunakan cookie, tidak menyimpan palet, dan tidak memerlukan login.
Tips
- Jika dua warna dalam palet terlihat terlalu mirip, coba jenis palet dengan rentang lebih lebar, seperti triadik atau tetradik, bukan analog.
- Untuk desain UI yang lebih tenang, gunakan saturasi lebih rendah (40–60%) daripada warna yang terlalu mencolok.
- Gunakan jenis monokromatik untuk membuat variasi hover, aktif, dan nonaktif dari satu warna merek.
Pertanyaan umum
Apakah alat ini menyimpan palet saya?
Tidak. Tidak ada yang disimpan. Jika Anda memuat ulang halaman atau menutup tab, palet akan hilang kecuali sudah disalin ke tempat lain.
Apa perbedaan antara roda dan slider?
Roda mengatur rona dan saturasi sekaligus berdasarkan lokasi yang Anda klik atau seret. Slider di panel edit memungkinkan Anda mengatur rona, saturasi, dan luminansi secara terpisah untuk nilai yang lebih presisi.
Bisakah saya menggunakan kode HEX 3 digit seperti #1ec?
Bisa. Kolom HEX menerima kode 3 atau 6 digit, dengan atau tanpa tanda # di awal.
Mengapa roda terlihat penuh warna, tetapi warna pilihan saya tampak redup?
Latar roda selalu menampilkan saturasi penuh di tepinya sebagai acuan visual. Saturasi warna pilihan ditunjukkan oleh jarak penanda dari pusat, sedangkan kecerahannya merupakan nilai terpisah yang diatur melalui slider Luminansi.
Apakah memindahkan satu sampel akan memengaruhi sampel lainnya?
Tidak. Memindahkan atau mengedit satu sampel hanya mengubah warna tersebut. Sampel lain tetap pada posisi hasil perhitungan sampai Anda memindahkannya atau mengubah jenis palet, yang akan mengatur ulang semua penyesuaian manual.
Apa perbedaan unduhan PNG/JPG dan SVG?
Keduanya menampilkan kartu palet yang sama. PNG dan JPG memiliki resolusi tetap, sedangkan SVG tetap tajam dalam ukuran apa pun dan dapat diedit menggunakan aplikasi grafis vektor.