Pembuat palet warna
Masukkan warna dasar, pilih skema harmoni, dan lihat contoh warnanya seketika. Salin satu kode HEX atau seluruh palet sebagai custom property CSS.
Berjalan di browser Anda: apa pun yang Anda ketik tidak dikirim ke mana pun.
Cara menggunakan
- Ketik kode HEX atau pilih warna dari color picker.
- Pilih skema harmoni dari daftar.
- Klik Salin di samping contoh warna untuk satu kode, atau salin blok variabel CSS untuk seluruh palet.
Cara kerja
Alat ini mengubah warna dasar dari RGB ke HSL (hue, saturation, lightness) lalu memutar hue-nya. Misalnya, #3366cc adalah hsl(220, 60%, 50%). Komplementernya berada di 180°: hsl(40, 60%, 50%), yaitu #cc9933. Warna hasil putaran dibulatkan ke nilai RGB bulat terdekat.
Contoh
Secara default alat ini dimulai dari #3366cc dengan skema triadik: hasilnya #3366cc, #cc3366, dan #66cc33, dan blok CSS-nya --color-1: #3366cc;, --color-2: #cc3366;, --color-3: #66cc33;. Merah murni #ff0000 dengan split komplementer menghasilkan merah itu sendiri ditambah #00ff80 dan #0080ff, dua hue di kiri dan kanan cyan.
Tips
- Pakai satu warna dari skema sebagai warna utama dan sisanya sebagai aksen; membagi semuanya sama rata terlihat ramai.
- Palet analog terasa tenang; palet komplementer terasa energik.
- Setelah ditempel, ganti nama variabel sesuai fungsinya (
--brand, --accent).
Pertanyaan umum
Bagaimana warna-warnanya dihitung?
Warna dasar diubah ke HSL. Skema harmoni memutar hue dengan sudut tetap pada lingkaran warna dan mempertahankan saturation dan lightness, jadi semua warna sama cerahnya dengan warna dasar. Contoh pertama di setiap skema adalah warna dasar Anda sendiri.
Apa beda triadik dan tetradik?
Triadik memakai tiga hue yang berjarak 120°, kombinasi yang seimbang tetapi mencolok. Tetradik di sini memakai empat hue di 0°, 60°, 180°, dan 240°, membentuk persegi panjang pada lingkaran: ada dua pasang komplementer, dan lebih sulit dibuat seimbang.
Bagaimana skema monokromatik bekerja?
Skema ini mempertahankan hue dan saturation warna dasar, lalu menetapkan lightness HSL di 20, 35, 50, 65, dan 80%. Warna dasar hanya muncul jika lightness-nya kebetulan sama dengan salah satu nilai tersebut.
Apakah palet ini menjamin kontras yang cukup?
Tidak. Harmoni menggambarkan hubungan antar-hue, bukan keterbacaan. Cek setiap pasangan teks dan latar dengan alat cek kontras sebelum dipakai.