Buat Palet Warna dari Satu Warna
Buat palet lengkap dari satu warna dasar — gradasi, komplementer, dan analog — lalu salin setiap kode HEX.
Klik sampel mana pun untuk menyalin HEX-nya.
Dihasilkan di perangkat
Aman untuk merek yang belum diluncurkan
Tanpa akun
Koneksi aman
Cara kerjanya
- 1
Pilih warna dasar
Tempel kode HEX — biasanya warna merek yang memang sudah Anda pegang.
- 2
Pilih aturan harmoninya
Komplementer untuk kontras, analog untuk ketenangan, triadik atau tetradik untuk keragaman, gradasi untuk skala satu rona.
- 3
Salin paletnya
Bawa nilai HEX-nya langsung ke stylesheet, editor tema, atau alat desain Anda.
Mengapa memakai alat ini
Lima aturan harmoni
Komplementer, analog, triadik, tetradik, dan gradasi; masing-masing hubungan yang terdefinisi di roda warna, bukan sekadar suasana.
Satu masukan, satu set utuh
Berikan warna merek yang sudah Anda punya; sisanya diturunkan darinya, sehingga paletnya berjangkar, bukan dirakit.
Nilai HEX siap salin
Tiap contoh warna hadir dengan kodenya, siap untuk stylesheet atau berkas desain.
Melihat hubungannya
Warna yang dihasilkan ditampilkan bersama, dan hanya begitulah Anda bisa menilai sebuah kombinasi bertahan atau tidak.
Tidak ada yang diunggah
Aritmetika rodanya berjalan di browser Anda — tidak ada nilai warna yang dikirim ke mana pun.
Gratis tanpa akun
Tanpa pendaftaran, tanpa batas jumlah palet, dan tanpa watermark.
Apa sebenarnya aturan harmoni itu
Aturannya adalah posisi pada roda rona, bukan pendapat estetis. Ambil sudut rona warna dasar, dan aturannya memberi tahu di mana yang lain berada: komplementer di +180°, analog kira-kira ±30°, triadik di +120° dan +240°, tetradik sebagai dua pasangan komplementer. Itulah seluruh mekanismenya. Kegunaannya bukan karena kombinasi ini objektif indah — melainkan karena ia **bisa diperkirakan**. Palet yang dibangun dengan aturan gagal dengan cara yang bisa Anda nalar, sedangkan palet yang dirakit dari contoh-contoh warna yang masing-masing tampak bagus sendirian biasanya gagal dengan cara yang tak bisa didiagnosis siapa pun, karena tidak ada hubungan yang bisa diperiksa.
Memilih di antara aturan-aturannya
Tiap aturan memecahkan masalah yang berbeda. Rona analog duduk bersebelahan dan berbagi kemiripan keluarga, sehingga terasa aman dan tenang — bagus untuk latar atau ilustrasi, lemah ketika Anda butuh sesuatu menonjol. Komplementer memaksimalkan pemisahan, dan itulah yang dibutuhkan sebuah aksen: satu warna dominan dan satu rona berseberangan yang dipakai hemat untuk aksi yang ingin Anda klik. Triadik memberi tiga rona berbeda yang tetap seimbang, tetapi hanya bila satu dominan dengan jelas dan dua lainnya mendukung. Tetradik menawarkan empat dan sungguh sulit; sebagian besar palet tetradik yang berhasil di praktik memakai dua warnanya pada sepersekian luas dua warna lainnya.
Kenapa antarmuka lebih butuh gradasi daripada rona
Aturan di atas menjawab “warna mana yang serasi”, tetapi produk sungguhan butuh hal lain: banyak tingkat dari warna yang sama. Latar halaman, permukaan kartu, garis tepi setipis rambut, label nonaktif, dan teks tubuh biasanya rona yang sama pada kecerahan berbeda, dan meratanya jarak antar-tingkat itu lebih menentukan tampilan akhir daripada pilihan antara triadik dan tetradik. Itulah yang dihasilkan mode gradasi — satu rona yang dilangkahkan lewat kecerahan, persis cara sebuah skala warna design system dibangun. Sebagian besar proyek jauh lebih membutuhkan satu rona aksen dan skala netral yang tersusun baik ketimbang lima rona yang berbeda-beda.
Palet yang dihasilkan itu titik awal, bukan design system
Yang diberikan roda warna adalah hubungan antar-rona. Yang tidak bisa ia berikan adalah peran. Palet yang berfungsi memberi setiap warna sebuah tugas — ini permukaan, ini aksi utama, ini aksi destruktif, ini garis tepi — dan penetapan itu bergantung pada antarmuka Anda, bukan pada geometri. Roda warna juga tidak tahu apa pun soal keterbacaan: skema triadik bisa seimbang sempurna dan tetap menaruh teks di atas latar pada 2,5:1. Hasilkan hubungannya di sini, tetapkan perannya sendiri, lalu lewatkan setiap pasangan teks-di-atas-latar ke pemeriksa kontras sebelum semuanya masuk ke pustaka komponen.
Proporsi 60-30-10
Kegagalan yang umum adalah menganggap palet lima warna sebagai izin memakai lima warna sama rata, yang menghasilkan antarmuka ramai tanpa titik fokus. Konvensi yang bertahan saat berhadapan dengan tata letak sungguhan kira-kira 60% warna netral dominan, 30% sekunder, dan 10% aksen. Dengan rasio itu, sepasang warna komplementer bukan dua warna yang bersaing — melainkan bidang luas yang tenang dan satu interupsi kecil yang disengaja. Ini juga sebabnya palet terlihat lebih bagus di mockup daripada di produksi: mockup menampilkan contohnya dalam ukuran sama, sedangkan antarmuka tidak akan begitu.
Mengonversi dan memperluas palet
Begitu setnya ada, pekerjaan praktisnya adalah mengubahnya menjadi sesuatu yang bisa dipakai stylesheet. Nilai rona dari roda datang sebagai HEX; kalau Anda berencana menurunkan varian hover, aktif, dan nonaktif, konversikan dulu ke HSL dengan konverter warna lalu langkahkan kecerahannya, karena itu menjaga tiap varian tetap dalam keluarga rona yang sama alih-alih melenceng. Simpan warna dasarnya sebagai satu-satunya sumber kebenaran dan hasilkan variannya dari situ, bukan menimbun puluhan kode hex yang nyaris serupa — palet yang tumbuh secara manual akan kehilangan konsistensi dalam beberapa bulan.
Kesalahan umum yang sebaiknya dihindari
- Memakai semua warna palet dengan bobot sama. Lima warna berluas sama menghasilkan antarmuka tanpa titik fokus; pertahankan kira-kira 60% dominan, 30% sekunder, 10% aksen agar aksennya benar-benar terbaca sebagai aksen.
- Memilih skema sebelum tahu apa yang harus menonjol. Analog itu tenang dan lemah untuk penekanan; komplementer ada supaya satu elemen mustahil terlewat. Pilih aturannya dari tugasnya, bukan dari penampilan contoh warnanya.
- Menganggap palet yang seimbang otomatis terbaca. Roda warna tidak tahu apa-apa tentang rasio kontras — pasangan yang harmonis pun masih bisa menaruh teks pada 2,5:1 di atas latarnya.
- Membangun antarmuka hanya dari rona. Permukaan, garis tepi, keadaan nonaktif, dan teks tubuh sebagian besar adalah satu rona pada kecerahan berbeda; skala gradasi yang baik lebih berguna sehari-hari daripada warna aksen keempat.
- Memilih varian hover dan aktif secara manual sebagai kode hex baru. Turunkan keduanya dengan melangkahkan kecerahan di HSL dari warna dasar, kalau tidak keluarganya melenceng rona seiring paletnya tumbuh.
Perbandingan
| KeroTools | Galeri palet | Perangkat lunak desain | |
|---|---|---|---|
| Berangkat dari warna merek Anda | Ya | Umumnya acak | Ya |
| Aturan harmoni bernama | Lima | Jarang disebutkan | Ada |
| Nilai dikirim ke server | Tidak pernah | Sering | Tidak |
| Perlu akun | Tidak | Sering untuk menyimpan | Perlu lisensi |
| Jalan offline | Setelah muat pertama | Tidak | Ya |
| Biaya | Gratis | Gratis / berbayar | Berbayar |
Fitur
Komplementer
Rona yang persis berseberangan, berjarak 180° — pemisahan maksimal, dipakai untuk satu aksen di hadapan warna dominan.
Analog
Rona bertetangga berjarak sekitar 30°, berbagi kemiripan keluarga dan terbaca tenang serta padu.
Triadik
Tiga rona berjarak sama 120° — hidup dan seimbang, tetapi menuntut satu dominan yang jelas.
Tetradik
Empat rona dalam dua pasangan komplementer; skema terkaya sekaligus paling sulit diseimbangkan.
Gradasi
Satu rona yang dilangkahkan lewat kecerahan — skala yang sebenarnya dibutuhkan antarmuka untuk permukaan, garis tepi, dan teks.
HEX untuk tiap contoh
Setiap warna yang dihasilkan membawa kodenya, siap disalin.
Tanpa instalasi
Tidak ada yang perlu diunduh atau dipasang — jalan langsung di halaman web.
Ramah Arab dan RTL
Antarmuka lengkap dalam delapan bahasa, termasuk Arab kanan-ke-kiri.
Aman secara bawaan
Disajikan lewat HTTPS, tanpa pelacakan berkas dan tanpa unggahan ke pihak ketiga.
Siapa yang memakainya
Desainer
Menurunkan satu set yang padu dari warna merek yang sudah ada, alih-alih mengumpulkan contoh warna dengan mata.
Pengembang front-end
Mendapat skala gradasi untuk permukaan dan garis tepi tanpa memilih selusin abu-abu satu per satu.
Pemilik usaha kecil
Memperluas satu warna logo menjadi sesuatu yang terpakai di situs dan di materi cetaknya.
Siapa pun yang menyesuaikan template
Mengisi slot sekunder dan aksen yang diminta editor tema, berangkat dari satu warna yang sudah mereka punya.
Pertanyaan yang Sering Diajukan
Tidak. Semuanya berjalan lokal di browser Anda — tidak ada yang diunggah, disimpan, atau dibagikan.
Ya — sepenuhnya gratis, tanpa akun dan tanpa batas.