Generator Palet Warna

Palet 5 warna yang indah — tekan spasi untuk membuat, kunci untuk menyimpan, ekstrak dari gambar

Harmoni:

Ekstrak Warna dari Gambar

📁 Klik untuk mengunggah atau seret dan lepas gambar

JPG, PNG, WebP — hingga 10MB

Gambarmu tidak pernah meninggalkan perangkatmu — semua pemrosesan terjadi di browsermu.

Ekspor Palet


      

    


    
    

      

        
Cek Kontras WCAG

        

      

    


    
    

      

        
Palet Tersimpan 

        

          Hapus semua palet tersimpan?
          
          
        

        

      

    


    
    

    
    

      
Cara Kerja Pembuatan Palet

      
Setiap palet dibuat menggunakan ruang warna HSL — Hue (0–360°), Saturation (0–100%), dan Lightness (0–100%). HSL intuitif untuk aturan harmoni karena hubungan rona didasarkan pada jarak sudut di sekitar roda warna.


      

        

          

            

            

            

          

          
Analogus

          
Rona dalam jarak 30° satu sama lain. Harmonis dan menenangkan. Cocok untuk tema alam dan laut.

        

        

          

            

            

            

          

          
Komplementer

          
Dua rona berjarak 180° satu sama lain. Kontras tinggi dan hidup. Umum dalam branding olahraga.

        

        

          

            

            

            

          

          
Triadik

          
Tiga rona berjarak sama 120° satu sama lain. Seimbang namun penuh warna. Baik untuk merek yang playful.

        

        

          

            

            

            

          

          
Monokromatik

          
Rona yang sama, saturasi dan lightness bervariasi. Elegan dan kohesif. Sempurna untuk desain minimalis.

        

        

          

            

            

            

          

          
Komplementer Terpisah

          
Satu rona dasar ditambah dua rona berjarak 150° di setiap sisi. Kontras tanpa ketegangan.

        

        

          

            

            

            

            

          

          
Tetradik

          
Empat rona pada interval 90°. Kaya dan kompleks. Paling baik jika satu warna mendominasi.

        

      


      
Contoh — Palet Analogus

      
Hue awal: H = 210° (biru). Aturan analogus: 5 rona berjarak 15° satu sama lain.
Rona: 195°, 205°, 215°, 225°, 235°.
Saturasi: bervariasi dari 55% hingga 70% untuk kedalaman. Lightness: bervariasi dari 45% hingga 70% untuk rentang.
Hasil: palet gradien biru laut yang kohesif dengan kontras alami.

    


    
    

    
    

      
Tips Palet Warna untuk Desainer

      
    
        
  • Ikuti aturan 60-30-10. Gunakan warna dominanmu untuk 60% desain (latar belakang, area besar), sekunder untuk 30% (bagian, panel UI), dan aksen untuk 10% (CTA, sorotan). Palet 5 warna secara alami cocok dengan aturan ini.
    • 
        
  • Selalu cek kontras untuk teks. Palet yang indah tetap bisa gagal WCAG AA jika teks dan latar belakang tidak memiliki rasio kontras minimal 4,5:1. Gunakan Cek Kontras bawaan di atas.
    • 
        
  • Batasi paletmu dalam produksi. Memiliki 5 warna tidak berarti menggunakan semua 5 di setiap layar. Sebagian besar desain yang halus menggunakan 2–3 warna secara dominan dan menyimpan yang lain untuk momen tertentu.
    • 
        
  • Kunci warna merekmu terlebih dahulu. Jika kamu memiliki warna merek utama, klik ikon kunci pada sampel tersebut sebelum membuat ulang — alat akan membangun palet harmonis di sekitar warna yang dikunci.
    • 
        
  • Ekstraksi gambar untuk keselarasan suasana. Unggah foto yang mencerminkan suasana yang kamu desain (pemandangan, foto produk, gambar gaya hidup) — palet yang diekstraksi akan terasa selaras secara emosional dengan arah merekmu.
    • 
      

    


    
    

      
Pertanyaan yang Sering Diajukan

      

        
Palet menggunakan aturan harmoni HSL (Hue, Saturation, Lightness). Misalnya, Analogus memilih rona dalam jarak 30°, Komplementer menggunakan rona berjarak 180°, dan Triadik memilih tiga rona berjarak 120°. Saturasi dan lightness bervariasi untuk menciptakan kontras yang menyenangkan secara visual dalam setiap palet.

        
Tidak — gambarmu tidak pernah meninggalkan perangkatmu. Alat ini menggunakan Canvas API browser untuk membaca data piksel secara lokal dan mengekstrak warna dominan menggunakan algoritma binning frekuensi. Tidak ada server, tidak ada unggahan, tidak ada pelacakan.

        
Klik langsung pada sampel warna mana pun atau labelnya untuk menyalin kode hex ke clipboard. Pesan konfirmasi singkat akan muncul.

        
Kamu bisa mengekspor sebagai properti khusus CSS (--color-1 hingga --color-5), cuplikan konfigurasi Tailwind CSS, variabel SCSS, objek JSON, atau daftar hex yang dipisahkan koma. Klik tombol ekspor mana pun untuk menyalin ke clipboard secara instan.

        
Pengecek kontras menampilkan lencana lulus/gagal WCAG AA untuk setiap warna palet yang dirender sebagai teks pada latar belakang putih (#fff) dan hitam (#000). Warna yang memenuhi rasio 4,5:1 untuk teks normal menampilkan lencana hijau "AA Lulus".

        
Hingga 50 palet dapat disimpan di localStorage browsermu. Palet tetap ada antar sesi. Kamu bisa melihat, memuat ulang, atau menghapus palet tersimpan dari panel Riwayat.