Lompat ke konten
SPCXTools

Generator Palet Warna

Pilih satu warna dan dapatkan palet lima warna yang harmonis berdasarkan teori warna.

Berjalan secara lokal — file tidak pernah meninggalkan perangkat Anda

Memuat alat…

Cara menggunakan Generator Palet Warna

  1. 1Pilih warna dasar menggunakan pemilih warna, ketik nilai HEX/RGB/HSL, atau klik Acak.
  2. 2Pilih skema warna seperti komplementer, analogus, atau triadik.
  3. 3Klik kotak warna mana saja untuk menyalin kode HEX-nya.
  4. 4Salin seluruh palet sebagai properti kustom CSS atau JSON.

Buat palet warna dari satu warna

Memilih warna yang serasi adalah salah satu bagian tersulit dalam mendesain website, aplikasi, presentasi, logo, atau poster. Teori warna menawarkan kombinasi yang terbukti efektif pada roda warna, dan generator palet ini menerapkannya untuk Anda. Mulai dengan satu warna yang Anda suka — atau warna brand Anda — pilih skema, dan dapatkan lima warna harmonis yang siap disalin ke proyek Anda.

Fitur

  • Tujuh skema: komplementer, analog, triadik, split komplementer, tetradik, monokromatik, dan shades.
  • Bebas pilih warna awal dalam format HEX, RGB, HSL, nama warna CSS, atau pilih warna acak.
  • Klik untuk menyalin warna apa pun.
  • Ekspor sebagai CSS custom properties atau JSON array.
  • Label mudah dibaca yang berganti antara hitam dan putih untuk menjaga kontras.

Skema mana yang harus digunakan?

Skema Kesan Cocok untuk
Komplementer Tegas, kontras tinggi Tombol call-to-action, olahraga, promo
Analog Tenang, harmonis Alam, kesehatan, background
Triadik Hidup, seimbang Produk anak-anak, ilustrasi
Split komplementer Cerah tapi tidak terlalu mencolok Website yang butuh satu aksen kuat
Tetradik Kaya, penuh warna Infografis dan grafik
Monokromatik Elegan, minimalis Website perusahaan, portofolio
Shades Sistematis Design system, state UI

Dari palet ke desain

Setelah palet siap, pastikan teks mudah dibaca di setiap latar belakang dengan Cek Kontras Warna, konversi warna ke RGB, HSL, atau CMYK untuk kebutuhan cetak menggunakan Konverter Warna, dan padukan dua warna menjadi latar belakang yang halus dengan Generator Gradien CSS.

Pertanyaan yang sering diajukan

Apa itu skema warna komplementer?
Warna komplementer saling berhadapan di roda warna, seperti biru dan oranye. Kontras yang kuat membuat aksen dan call to action lebih menonjol. Gunakan satu warna sebagai warna utama dan warna pelengkapnya secukupnya.
Apa perbedaan antara analogus, triadik, dan tetradik?
Warna analogus bersebelahan di roda warna dan terasa tenang serta serasi. Warna triadik berjarak sama 120° dan terasa cerah namun seimbang. Palet tetradik (persegi) menggunakan empat rona berjarak 90° dan paling warna-warni — biasanya paling pas dengan satu warna dominan.
Bagaimana cara menggunakan palet lima warna di website?
Pendekatan yang umum adalah aturan 60-30-10 — sekitar 60% latar belakang netral, 30% warna primer, dan 10% warna aksen. Gunakan warna paling gelap untuk teks dan cek setiap kombinasi teks dan latar belakang dengan contrast checker.
Bisakah saya mulai dari warna brand saya?
Ya. Masukkan kode HEX brand Anda sebagai warna dasar; setiap skema akan dibuat berdasarkan warna tersebut. Untuk mendapatkan warna brand dari logo atau screenshot website, gunakan Image Color Picker.
Bagaimana warna dihitung?
Warna dasar dikonversi ke HSL (hue, saturation, lightness). Skema warna memutar hue dengan sudut tertentu di roda warna, sedangkan palet monokromatik dan shade mempertahankan hue dan hanya mengubah lightness.

Alat terkait

Cek Kontras WarnaCek apakah teks Anda cukup mudah dibaca — dan dapatkan warna terdekat yang memenuhi standar WCAG.Konverter WarnaKonversi warna apa pun antara HEX, RGB, HSL, HSV, dan CMYK, serta cek kontrasnya.Color Picker GambarKlik di mana saja pada gambar untuk mendapatkan warna HEX, RGB, dan HSL yang akurat — beserta palet warna utamanya.Generator Gradien CSSDesain background gradien secara visual dan salin kode CSS-nya — linear, radial, atau conic.Generator Box ShadowAtur bayangan lembut, tajam, berlapis, atau inset dengan pratinjau langsung dan salin CSS-nya.Simulator Buta WarnaLihat pratinjau gambar Anda dari sudut pandang penderita defisiensi penglihatan warna untuk memastikan desain Anda mudah diakses.