🎨

🎨 Color Palette Studio — Generator Palet & Skala Warna

Rancang palet warna harmonis berstandar desain industri. Dilengkapi pembuat harmoni matematis HSL, skala nuansa (tints & shades 50–950), verifikasi kontras aksesibilitas WCAG, pratinjau komponen UI langsung, dan ekspor kode multi-format.

🌈 Harmoni HSL ♿ WCAG AA/AAA 🌊 Tailwind Config ⚡ Real-time 🔒 100% Privat di Browser

🌈 Swatch Palet Harmonis

Klik kartu atau kode hex untuk menyalin

📐 Skala Tints & Shades Lengkap (50 — 950)

Gradasi warna dari level paling terang (50) hingga paling pekat (950) yang dihasilkan secara algoritmik dari warna dasar Anda.

📱 Pratinjau Komponen UI Real-Time

Lihat bagaimana palet warna Anda bekerja dalam antarmuka aplikasi nyata (Button, Card, Badge, Alert).

PROYEK AKTIF Standar Desain Modern

Portal Bisnis Terintegrasi

Antarmuka dirancang dengan proporsi warna 60-30-10 untuk menjaga kenyamanan visual dan keterbacaan tipografi.

💡 Catatan Desain: Warna aksen menarik perhatian pengguna tanpa membuat visual terasa berantakan.

💻 Ekspor Kode Palet Warna


            
        

        
        

            
            
        

    


    
    

    
    

        
📚 Teori Warna & Prinsip Harmoni Desain Antarmuka

        
Dalam desain visual modern, pemilihan palet warna bukan sekadar preferensi estetika subjektif, melainkan penerapan matematika sudut pada roda warna (*color wheel*) Newton dan Munsell:

        
    
            
  • Aturan 60-30-10: Proporsi klasik desain ruang dan UI. 60% warna dominan (biasanya background netral), 30% warna sekunder (elemen kartu, teks, navigasi), dan 10% warna aksen (tombol Call to Action / highlight).
    • 
            
  • Harmoni Analogous (±30°): Menggunakan warna-warna yang berdampingan pada roda warna. Menghasilkan nuansa yang sangat tenang, alami, dan harmonis bagi mata manusia.
    • 
            
  • Harmoni Komplementer (180°): Dua warna berseberangan langsung. Menciptakan kontras tertinggi untuk menarik perhatian instan.
    • 
            
  • Triadic (120°): Tiga warna berjarak sama yang membentuk segitiga seimbang. Memberikan kekayaan visual dinamis tanpa terasa mencolok.
    • 
            
  • Aksesibilitas WCAG: Rasio kontras teks terhadap latar belakang wajib minimal 4.5:1 (Level AA) untuk teks normal, atau 3:1 untuk teks besar agar dapat dibaca oleh pengguna dengan keterbatasan visual.
    • 
        

    


    

        
❓ Pertanyaan yang Sering Diajukan (FAQ)

        

            
            
Salin konfigurasi dari tab Tailwind di atas, lalu tempelkan ke properti theme.extend.colors di berkas tailwind.config.js Anda. Anda langsung dapat menggunakan utility class seperti bg-brand-500 atau text-accent.

        

        

            
            
Skor tersebut mengacu pada standar aksesibilitas web internasional WCAG 2.1. Skor AA menunjukkan rasio kontras ≥ 4.5:1 (layak untuk semua teks body), sedangkan AAA menunjukkan rasio ≥ 7:1 (kontras optimal tertinggi).

        

        

            
            
Tidak. Seluruh perhitungan trigonometri roda warna, skala shades, dan rendering UI dilakukan 100% di browser Anda menggunakan JavaScript tanpa mengirim data apapun ke server.

        

    








        

            
📖 Cara Menggunakan Cara Menggunakan Color Palette Studio

            

                                

                    
1

                    Pilih Warna Dasar
                    
Tentukan warna merek primer Anda menggunakan color picker visual atau masukkan kode Hex 6 digit.

                

                                

                    
2

                    Tentukan Rumus Harmoni
                    
Pilih aturan harmoni roda warna seperti Analogous, Komplementer, Triadic, atau Split-Komplementer.

                

                                

                    
3

                    Periksa Kontras & Pratinjau UI
                    
Cek nilai rasio WCAG pada setiap kartu warna dan evaluasi tampilannya pada kartu mock-up antarmuka.

                

                                

                    
4

                    Ekspor Tokens Desain
                    
Salin kode variabel CSS, konfigurasi Tailwind CSS, SCSS, atau unduh berkas JSON untuk tim pengembang.

                

                            

        

                

            
💡 Tips Arsitektur Warna UI/UX

            

                                

                    🎯                    Patuhi Aturan 60-30-10
                    Gunakan 60% warna netral, 30% warna struktural, dan simpan warna paling kontras hanya untuk 10% elemen interaktif krusial.                

                                

                    ♿                    Cek Aksesibilitas WCAG AA
                    Pastikan warna teks tombol memiliki kontras minimal 4.5:1 terhadap warna latar agar lolos uji aksesibilitas pengguna.                

                                

                    🌊                    Manfaatkan Skala Tints 50-950
                    Gunakan tingkat 50-100 untuk background badge/hover, 500-600 untuk tombol utama, dan 800-950 untuk heading tipografi.                

                                

                    📱                    Uji Pada Mode Terang & Gelap
                    Warna komplementer yang terlihat bagus di layar cerah seringkali membutuhkan saturasi lebih rendah saat diterapkan pada dark mode.                

                            

        

                

            
🔗 Coba Juga Tools Lain

            
Tools ini cocok dipadukan dengan kalkulator lainnya:

            

                                
                    👁️
                    WCAG Contrast Checker
Uji rasio kontras teks & simulator buta warna CVD
                
                                
                    🪟
                    CSS Glassmorphism
Desain efek frosted glass dengan palet transparan
                
                                
                    📦
                    Box-Shadow Elevation
Padukan warna palet dengan bayangan Material Design 3
                
                            

        

                

            
🔗 Alat Terkait yang Mungkin Anda Butuhkan

            

                                
                    🎨 CSS Gradient Generator                
                                
                    🌊 Tailwind to CSS Converter                
                                
                    📐 CSS Grid Generator                
                                
                    🪟 Glassmorphism Generator                
                                
                    📦 CSS Box Shadow Generator                
                                
                    🔲 Border Radius Generator                
                            

        

                
        

            

            

            
            
                                

        

            🕐 Terakhir diperbarui: 10 Oktober 2026 · Dibuat oleh dwik.web.id · Syarat & Ketentuan
        

            
            
                    
        
    
        
    
    
    
    
    

    
    

    
    
    
    
    
    
    
    
    
        
    

    
    

        

            
🔖 Daftar Bacaan