Penjelajah Harmoni Warna
Klik roda warna interaktif untuk menjelajahi semua hubungan harmoni warna dari warna dasar apa pun. Lihat harmoni komplementer, komplementer terbelah, analog, triadik, tetradik, dan monokromatik disorot pada roda dengan nilai HEX dan HSL. Ekspor sebagai variabel CSS. Berjalan sepenuhnya di browser Anda - tanpa pendaftaran.
Enter a base color or click anywhere on the color wheel to explore all harmony relationships. Click a harmony type to see its colors highlighted on the wheel. All processing runs locally in your browser.
Click the wheel to pick a hue
Hue
217°
Sat
91%
Light
60%
Two colors directly opposite on the color wheel (180° apart). High contrast, vibrant combination.
Base
#3C83F6
217° 91% 60%
Complement
#F6AF3C
37° 91% 60%
:root {
--color-1: #3c83f6;
--color-2: #f6af3c;
}Mengapa menggunakan penjelajah harmoni warna kami?
- Roda warna interaktif: penjelajah menampilkan roda warna hidup yang dapat Anda klik untuk memilih hue apa pun. Titik harmoni diperbarui seketika saat Anda bergerak di roda, menunjukkan persis di mana setiap warna harmoni berada.
- Perhitungan harmoni instan: ketujuh jenis harmoni - komplementer, komplementer terbelah, analog, triadik, tetradik, komplementer terbelah ganda, dan monokromatik - diperbarui secara waktu nyata saat Anda mengubah warna dasar.
- Pemrosesan aman dan privat: data warna Anda tidak pernah meninggalkan perangkat. Penjelajah berjalan sepenuhnya di browser Anda memakai rendering berbasis canvas, jadi tidak ada data yang diunggah.
- 100% gratis selamanya: gunakan penjelajah ini tanpa pendaftaran, langganan, batas laju, atau paywall tersembunyi. Jelajahi sebanyak apa pun kombinasi warna, sepenuhnya gratis.
Apa itu penjelajah harmoni warna?
Penjelajah harmoni warna adalah alat yang memvisualisasikan hubungan matematis antar warna pada roda warna. Teori harmoni warna mendefinisikan hubungan sudut tertentu antar hue yang menghasilkan kombinasi enak dipandang - misalnya, warna yang berjarak 180° (komplementer) menciptakan kontras tinggi, sedangkan warna berjarak 30° (analog) menciptakan transisi lembut dan alami. Penjelajah ini menampilkan roda warna interaktif, menghitung ketujuh jenis harmoni utama dari warna dasar Anda, dan mengekspor hasilnya sebagai variabel CSS - semuanya berjalan lokal di browser Anda.
Cara kerja penjelajah harmoni warna kami
- Masukkan atau pilih warna dasar: ketik kode warna HEX di kolom masukan, atau klik di mana saja pada roda warna untuk memilih hue. Titik harmoni diperbarui seketika pada roda.
- Pilih jenis harmoni: klik salah satu dari tujuh kartu harmoni untuk melihat warnanya disorot pada roda dan ditampilkan sebagai sampel individual dengan nilai HEX dan HSL.
- Salin atau ekspor palet: klik sampel mana pun untuk menyalin nilai HEX-nya, gunakan Salin HEX untuk menyalin semua warna sekaligus, atau gunakan Ekspor Variabel CSS untuk menyalin blok properti kustom CSS yang siap dipakai.
Tujuh jenis harmoni warna
- Komplementer: dua warna yang tepat berhadapan pada roda (berjarak 180°). Menciptakan kontras dan ketegangan visual maksimum - ideal untuk tombol ajakan bertindak dan desain berdampak tinggi.
- Komplementer terbelah: warna dasar plus dua warna yang bersebelahan dengan komplementernya (±30° dari komplementer). Ketegangan lebih rendah daripada komplementer tetapi kontrasnya tetap tinggi - pilihan lebih aman untuk sebagian besar desain.
- Analog: lima warna bersebelahan pada roda (±30° dan ±60°). Harmonis dan terlihat alami - banyak ditemukan di alam dan dipakai untuk desain yang tenang dan kohesif.
- Triadik: tiga warna berjarak merata pada interval 120°. Cerah dan seimbang - memberikan kontras visual kuat sambil mempertahankan harmoni.
Batasan penting
Penjelajah harmoni warna menghitung hubungan harmoni hanya berdasarkan sudut hue, mempertahankan saturasi dan kecerahan warna dasar Anda pada semua warna harmoni. Dalam praktiknya, Anda mungkin ingin menyesuaikan saturasi dan kecerahan tiap warna harmoni sesuai konteks desain Anda. Ekspor variabel CSS memakai nama generik (--color-1, --color-2…) - ganti namanya agar sesuai konvensi sistem desain Anda sebelum dipakai di produksi.
Pertanyaan yang Sering Diajukan
Penjelajah harmoni warna memvisualisasikan hubungan matematis antar warna pada roda warna. Ia menghitung semua jenis harmoni utama dari warna dasar dan menampilkannya sebagai sampel interaktif.
Klik di mana saja pada cincin berwarna roda untuk memilih hue. Warna dasar diperbarui seketika dan semua hubungan harmoni dihitung ulang.
Komplementer memakai satu warna tepat berhadapan (180°) untuk kontras maksimum. Komplementer terbelah memakai dua warna yang bersebelahan dengan komplementernya (±30°), memberi kontras serupa dengan ketegangan visual lebih rendah.
Ya. Semua pemrosesan terjadi sepenuhnya di browser Anda. Tidak ada data warna yang dikirim ke server mana pun.
Ya. Alat ini 100% gratis tanpa pendaftaran, langganan, dan batas penggunaan.
Klik sampel mana pun untuk menyalin nilai HEX-nya. Gunakan «Salin HEX» untuk menyalin semua warna sebagai daftar dipisah koma. Gunakan «Salin CSS» untuk menyalin blok properti kustom CSS.
Ia menghasilkan blok :root dengan properti kustom --color-1, --color-2… untuk semua warna pada harmoni aktif, siap ditempel ke stylesheet Anda.
Penjelajah mempertahankan saturasi dan kecerahan warna dasar Anda pada semua warna harmoni demi konsistensi visual. Anda dapat menyesuaikan warna individual di alat desain Anda setelah mengekspor.
Monokromatik memakai hue yang sama dengan variasi kecerahan dan saturasi untuk menciptakan rentang dari terang ke gelap - menghasilkan palet yang elegan dan kohesif.