Generator Palet Warna Online Gratis

Cara Menggunakan

• Pilih mode harmoni (Analogous, Complementary, Triadic, dll.) atau biarkan di Acak.
• Klik Hasilkan atau tekan Spasi untuk palet baru.
• Klik ikon kunci untuk mengunci warna agar tetap saat dihasilkan ulang.
• Klik kode HEX untuk menyalinnya ke clipboard.
• Gunakan Salin CSS untuk mendapatkan CSS custom properties atau mengunduhnya sebagai gambar.

Teori Warna & Mode Harmoni

Generator ini mendukung 7 mode harmoni berdasarkan teori warna. Analogous palet menggunakan warna-warna dalam rentang 30° satu sama lain pada roda warna · terasa tenang dan menyatu. Complementary palet memasangkan warna yang berjarak 180° untuk kontras maksimum. Triadic palet menggunakan tiga warna yang berjarak sama (120°) untuk variasi yang hidup. Split-Complementary mengambil satu warna dasar ditambah dua warna di samping komplementernya · berani tetapi lebih halus. Monochromatic palet hanya memvariasikan kecerahan dan saturasi dari satu warna · elegan dan minimalis. Square menggunakan empat warna berjarak 90° untuk palet yang seimbang dan kaya warna.

Pertanyaan yang Sering Diajukan

Bagaimana cara menggunakan warna-warna ini dalam proyek saya?

Klik "Salin CSS" untuk mendapatkan CSS custom properties yang siap tempel. Anda juga bisa mengeklik kode HEX individual untuk menyalinnya, atau mengekspor seluruh palet sebagai gambar PNG sebagai referensi di alat desain seperti Figma atau Canva.

Berapa banyak warna yang sebaiknya dimiliki sebuah palet?

Sebagian besar desain paling baik dengan 3-5 warna: warna utama, warna sekunder, aksen, dan 1-2 warna netral. Gunakan tombol "+ Tambah Warna" untuk memperluas palet Anda atau kurangi warna dengan menghasilkan lebih sedikit.

Bisakah saya mengunci warna yang saya sukai?

Ya! Klik ikon kunci pada contoh warna mana pun. Ketika Anda menghasilkan palet baru, warna yang dikunci tetap di tempatnya sementara yang tidak dikunci diacak. Ini bagus untuk membangun palet di sekitar warna merek tertentu.

Apa itu mode harmoni?

Mode harmoni menghasilkan palet berdasarkan hubungan teori warna. Analogous menggunakan warna-warna berdekatan untuk palet yang menenangkan. Complementary menggunakan warna berlawanan untuk kontras yang kuat. Triadic, Split-Complementary, dan Square mendistribusikan warna secara merata di sekeliling roda warna. Monochromatic mempertahankan satu warna dan memvariasikan kecerahan · sempurna untuk desain bersih dan minimalis.

Apa itu generator palet warna?

Generator palet warna memilih satu set warna yang bekerja sama secara visual, berdasarkan aturan teori warna. Anda memberikan petunjuk awal (warna dasar, mode harmoni, atau keacakan murni), dan ia mengembalikan tiga hingga lima kode heksadesimal yang berada di posisi yang disengaja pada roda warna. Output siap untuk dimasukkan ke variabel CSS, file Figma, panduan merek, atau deck slide.

Alat web modern mengekspresikan warna dalam heksadesimal (#2b7190), RGB (43, 113, 144), HSL (199, 54%, 37%), atau OKLCH (51,3% 0,066 233,4). Hex adalah yang paling mudah disalin-tempel; HSL adalah yang paling intuitif untuk disesuaikan dengan tangan (turunkan kecerahan untuk varian yang lebih gelap); OKLCH (diperkenalkan dalam CSS Color 4, didukung di browser sejak 2023) secara perseptual seragam, yang penting untuk token desain. Alat ini mengeluarkan hex secara default dan memungkinkan Anda menyalin properti kustom CSS untuk variabel dan langkah-langkah rona yang ramah OKLCH.

Semua pembuatan terjadi di browser Anda. Mode harmoni dihitung dari warna dasar melalui rotasi rona HSL, lalu dikonversi kembali ke hex. Tombol kunci menjaga favorit Anda sementara sisa palet diacak ulang. Tombol Spasi memicu pembuatan baru tanpa meninggalkan halaman, yang membuat eksplorasi menjadi cepat.

Apa yang ada di dalam generator

Bilah atas mengelompokkan tiga tombol yang mengubah pembuatan: tombol Generate yang menghasilkan palet baru, dropdown Mode dengan tujuh aturan harmoni (Acak, Analog, Komplementer, Triadik, Komplementer Terpisah, Monokromatik, Persegi), dan pemilih warna Dasar untuk menabur mode non-acak. Tombol Add Color memperluas palet di luar lima sampel default, berguna untuk sistem desain yang membutuhkan lebih banyak nada.

Setiap sampel menunjukkan kode hex-nya pada pil gelap yang tetap dapat dibaca pada latar belakang apa pun. Klik hex untuk menyalinnya. Klik kunci untuk membekukan sampel melalui pembuatan masa depan, dan beginilah cara Anda membangun palet di sekitar warna merek: kunci merek, hasilkan ulang, dapatkan tiga pendamping yang cocok. Bilah tindakan di dalam setiap sampel menjaga ikon kunci, salin, dan hapus dalam target sentuhan 32 piksel untuk memenuhi aturan target-size Lighthouse.

Di bawah palet, blok ekspor CSS Variables diperbarui secara langsung dengan warna Anda saat ini sebagai properti kustom :root. Tombol Export Image membuat serial palet ke PNG melalui kanvas tersembunyi, yang berguna untuk berbagi dalam ulasan desain atau menyematkannya ke moodboard. Pintasan keyboard Spasi menghasilkan ulang secara instan, tanpa perlu perubahan fokus.

Sejarah dan latar belakang

Isaac Newton memisahkan cahaya putih (1666)

Eksperimen prisma Isaac Newton tahun 1666 di Cambridge menunjukkan bahwa cahaya putih terdiri dari spektrum warna yang berkelanjutan. Dalam Opticks (1704), ia menetapkan roda tujuh warna dengan merah, oranye, kuning, hijau, biru, indigo, dan ungu diposisikan sehingga warna yang berlawanan secara diametris menciptakan komplementer yang harmonis. Setiap roda warna modern berasal dari diagram ini.

Teori warna Goethe (1810)

Theory of Colours Johann Wolfgang von Goethe (1810) membingkai ulang fisika Newton dalam istilah persepsi manusia. Goethe adalah yang pertama secara sistematis menggambarkan citra residu, kontras simultan, dan kehangatan psikologis merah versus dinginnya biru. Karyanya memengaruhi Turner, Schopenhauer, dan seluruh bidang psikologi warna yang diajarkan sekolah seni hari ini.

Johannes Itten memformalkan aturan harmoni (1961)

Johannes Itten, seorang guru Bauhaus, menerbitkan The Art of Color (Kunst der Farbe) pada tahun 1961. Roda warna dua belas jari-jarinya dan tujuh kontras (rona, nilai, suhu, komplementer, simultan, saturasi, perluasan) menjadi kurikulum standar di sekolah seni dan desain. Mode harmoni dalam alat ini (Analog, Komplementer, Triadik, Komplementer Terpisah, Persegi) berasal langsung dari bab Itten.

Sistem Pencocokan Pantone (1963)

Lawrence Herbert di Pantone, sebuah printer komersial M. Harris and Sons, meluncurkan Sistem Pencocokan Pantone pada tahun 1963. Buku chip memberi desainer dan printer referensi numerik bersama, sehingga warna merek bisa bertahan saat direproduksi di seluruh kertas, layar, dan kain. Color of the Year, dimulai pada 2000, sekarang mendorong tren palet di seluruh fashion, interior, dan desain web.

Palet aman-web dan 216 warna (1996)

Ketika tampilan 8-bit mendominasi web awal, Lynda Weinman mengkodifikasi palet aman-web 216 warna pada tahun 1996 untuk memastikan rendering yang konsisten di seluruh Mac dan Windows. Palet ini menjadi usang setelah warna 24-bit menjadi ada di mana-mana (sekitar tahun 2000), tetapi sintaks hex yang dipopulerkannya (#RRGGBB) tetap menjadi cara dominan untuk menulis warna di CSS, HTML, dan alat desain.

OKLCH dan warna seragam secara perseptual (2020)

Makalah OKLab Bjoern Ottosson 2020 memperkenalkan ruang warna yang secara perseptual seragam yang tidak memiliki ketidakkonsistenan kecerahan HSL. CSS Color Level 4 (browser dari Chrome 111, Safari 15.4, Firefox 113) menambahkan sintaks oklch(). Masa depan token desain, kontras warna yang dapat diakses, dan pembuatan palet semakin hidup dalam OKLCH karena keseragaman perseptual berarti bahwa dua warna dengan nilai L yang sama benar-benar terlihat sama terangnya.

Alur kerja praktis

Membangun identitas merek dari satu warna

Atur warna Dasar ke hex merek Anda, kunci sampel pertama, alihkan mode ke Analog atau Komplementer Terpisah, dan klik Generate hingga empat warna pendamping terasa benar. Salin variabel CSS dan tempel ke token sistem desain Anda. Hasilnya adalah palet yang berlabuh pada merek Anda dengan harmoni yang didukung teori.

Mendesain pasangan mode gelap

Pilih palet Monokromatik dengan latar belakang mode gelap Anda sebagai dasar. Lima sampel memberi Anda latar belakang, permukaan, pembagi, teks sekunder, dan teks utama dalam kecerahan yang berjenjang. Untuk mode terang, hasilkan palet Monokromatik terpisah dengan dasar terang. Dua palet yang dipasangkan melalui prefers-color-scheme mencakup sebagian besar kebutuhan tema tanpa penyesuaian ad hoc.

Memilih warna untuk visualisasi data

Untuk data kategorikal (grafik batang, segmen pie), palet Triadik atau Persegi memberi Anda tiga atau empat rona berbeda yang membaca secara terpisah pada grafik yang sibuk. Untuk data berurutan (heatmap, peta khoroplet), gunakan Monokromatik untuk memvariasikan kecerahan sambil menjaga rona konstan. Periksa kontras dengan latar belakang grafik; alat data-viz seperti Vega-Lite mengharapkan setidaknya 3:1 antara kategori yang berdekatan.

Draf palet aksesibilitas-pertama

Hasilkan palet, lalu tempel setiap pasangan ke dalam pemeriksa kontras (WebAIM, Tanaguru). Untuk teks badan di atas latar belakang Anda menginginkan setidaknya 4,5:1 (WCAG AA). Untuk teks besar atau komponen UI, 3:1 adalah ambang batas. Jika palet gagal, hasilkan yang baru atau kunci sampel merek dan biarkan yang lain diacak ulang untuk menemukan set yang sesuai.

Eksplorasi mood-board

Tekan Spasi berulang kali untuk mengulang lusinan palet acak. Ketika ada yang menarik perhatian Anda, kunci sampel terbaik, alihkan ke Analog, dan teruskan menghasilkan untuk menemukan variasi yang dibangun di atasnya. Loop tombol spasi lebih cepat daripada mengklik, yang memungkinkan Anda tetap dalam mode eksplorasi otak kanan tanpa memutus alur.

Pencocokan warna cetak-ke-layar

Ketika Anda memiliki referensi cetak (chip Pantone atau sampel kain), gunakan eyedropper untuk menemukan setara digital terdekat dan gunakan sebagai warna Dasar. Mode harmoni kemudian mengipas di sekitar referensi Anda. Sadarilah bahwa cetak adalah CMYK dan layar adalah RGB, sehingga kecocokan yang tepat tidak mungkin; tujuannya adalah palet yang cukup dekat untuk dibaca sebagai merek yang sama.

Jebakan umum

Kontras WCAG tidak otomatis

Palet teori-cantik masih bisa gagal aksesibilitas. Pasangan pastel-di-pastel (kuning muda di pink muda) terlihat menyenangkan tetapi memiliki kontras kurang dari 2:1. Selalu uji pasangan teks-di-latar yang diusulkan dalam pemeriksa WCAG. Jika palet harus bekerja untuk teks badan, bangunlah di sekitar persyaratan kontras terlebih dahulu, harmoni kedua.

Buta warna mempengaruhi 8% pria

Deuteranopia merah-hijau adalah bentuk paling umum dari defisiensi penglihatan warna, mempengaruhi sekitar 8% pria dan 0,5% wanita. Palet Komplementer merah-hijau menjadi satu noda coklat untuk pemirsa deuteranopik. Untuk warna kategorikal (grafik, lencana status, lampu lalu lintas), pasangkan warna dengan bentuk, label atau pola, dan uji dalam simulator seperti Stark atau Sim Daltonism.

HSL tidak seragam secara perseptual

Di HSL, kuning pada kecerahan 50% terlihat jauh lebih terang dari biru pada kecerahan 50%. Model HSL memperlakukan semua rona secara numerik sama, tetapi mata manusia tidak. Generator bekerja di HSL secara internal untuk rotasi rona, sehingga dua sampel dengan S dan L yang serupa masih dapat memiliki bobot perseptual yang berbeda secara nyata. Untuk palet yang seimbang secara perseptual, beralih ke alat yang sadar OKLCH (Leonardo, Open Color).

Perbedaan gamut antara sRGB dan Display P3

Tampilan Apple modern (sejak iMac 2015, MacBook Pro 2016, semua iPhone sejak 7) menggunakan Display P3, gamut warna yang lebih luas daripada sRGB. Merah jenuh yang terlihat hidup pada Display P3 bisa terlihat lebih kusam ketika hex yang sama dirender pada monitor sRGB yang lebih tua. Untuk warna merek yang harus terlihat identik di mana-mana, tetap dalam gamut sRGB yang lebih kecil.

Kode hex tidak membawa alpha secara default

Hex tiga digit (#abc) dan enam digit (#aabbcc) buram. Hex delapan digit (#aabbcc80, di mana 80 adalah 50% alpha) didukung dalam CSS Color 4 dan browser modern tetapi tidak dalam alat lawas. Jika Anda membutuhkan transparansi, gunakan rgba() atau hsla() sebagai gantinya, atau tetap pada warna buram dan biarkan opasitas induk menangani pencampuran.

Drift kalibrasi pemilih warna

Monitor yang tidak dikalibrasi dapat melayang beberapa unit Delta-E dari referensi, yang berarti palet yang terlihat murni di layar Anda dapat terlihat berlumpur atau terlalu jenuh di layar orang lain. Untuk pekerjaan kritis-merek, kalibrasi dengan perangkat Spyder atau i1Display. Untuk sebagian besar desain web, varians layar tidak dapat dihindari; pilih warna yang bekerja di seluruh rentang median.

Privasi dan penanganan data

Semua berjalan di browser Anda. Matematika harmoni adalah JavaScript, ekspor kanvas lokal, dan API clipboard memerlukan gerakan pengguna. Kami tidak mengirim kode hex Anda ke mana pun, tidak melacak palet apa yang Anda hasilkan, dan tidak menyimpan apa pun dalam cookie atau localStorage. Muat ulang halaman dan palet sebelumnya hilang.

Setelah halaman dimuat, generator bekerja offline. Anda dapat menggunakannya di penerbangan, di dalam proxy perusahaan, atau di lingkungan air-gapped. Satu-satunya tindakan yang menyentuh jaringan adalah Export Image opsional, yang mengunduh melalui URL blob, dan unduhan itu sendiri tidak mengirimkan warna Anda ke mana pun.

Kapan tidak menggunakan generator ini

Membuat sistem desain dengan token semantik

Sistem desain membutuhkan token bernama, semantik (color-primary-500, color-error, color-warning) dengan nilai mode terang dan gelap berpasangan, jaminan kontras, dan langkah skala bernama. Gunakan alat khusus (Material Color Tool, Open Color, Leonardo oleh Adobe) atau sistem manajemen token (Style Dictionary, Tokens Studio). Generator ini untuk eksplorasi, bukan desain sistem.

Manajemen warna cetak (CMYK, Pantone)

Pemisahan warna CMYK untuk pencetakan offset memerlukan alat profesional (panel sampel Adobe Illustrator, Pantone Connect). Konversi RGB-ke-CMYK adalah lossy dan batas cakupan tinta penting. Jika palet Anda akan dicetak dalam skala besar, bekerja dengan spesifikasi warna printer dari awal, bukan generator hex hanya-layar.

Menghasilkan palet yang dapat diakses untuk teks badan

Untuk palet yang harus menjamin kontras WCAG AA atau AAA di setiap pasangan, gunakan alat kontras-pertama seperti Tanaguru Contrast-Finder, Adobe Leonardo, atau alat berbasis APCA. Generator ini mengikuti aturan harmoni, bukan aturan kontras, sehingga palet Analog yang indah dapat memiliki pasangan teks-ke-latar 1,5:1 yang gagal aksesibilitas.

Animasi dan interpolasi warna

Untuk perhentian gradien atau animasi warna, Anda memerlukan interpolasi yang seragam secara perseptual dalam OKLCH atau LCH, bukan HSL mentah atau hex. Interpolasi gradien CSS default ke sRGB yang menghasilkan titik tengah berlumpur (titik tengah abu-abu yang terkenal antara kuning dan biru). Gunakan alat interpolasi warna (chroma.js Erin Kissane, oklch.com) untuk transisi animasi.

Lebih banyak pertanyaan

Kapan saya harus menggunakan hex vs RGB vs HSL?

Hex adalah yang paling kompak dan paling sering disalin, bagus untuk hand-off desain. RGB adalah yang paling mudah untuk dihitung dalam kode (setiap channel 0-255). HSL adalah yang paling mudah untuk disesuaikan dengan tangan: ubah rona untuk menggeser warna, kecerahan untuk varian. Untuk CSS modern, OKLCH adalah yang paling tahan masa depan untuk sistem desain karena seragam secara perseptual.

Mode harmoni mana yang harus saya pilih?

Mulai dengan Analog untuk palet yang tenang dan kohesif (antarmuka, blog). Gunakan Komplementer untuk pasangan call-to-action kontras tinggi. Triadik dan Persegi memberikan palet kategorikal yang hidup untuk grafik atau merek yang menyenangkan. Monokromatik terbaik untuk mode gelap dan sistem desain tonal. Komplementer Terpisah adalah pilihan paling aman "berani tetapi tidak mengganggu".

Bagaimana saya memeriksa aksesibilitas?

Tempel setiap pasangan teks-di-latar ke WebAIM Contrast Checker, Tanaguru, atau APCA Contrast Tool. Targetkan setidaknya 4,5:1 (WCAG AA) untuk teks badan, 3:1 untuk teks besar dan komponen UI, 7:1 (WCAG AAA) untuk aplikasi baca yang berat prosa. Uji dengan simulator buta warna (Stark, Sim Daltonism) untuk penggunaan kategorikal.

Bisakah saya mengekspor ke Figma atau Sketch?

Copy CSS memberi Anda properti kustom siap-tempel. Baik Figma dan Sketch mengimpor kode hex langsung melalui pemilih warnanya. Tombol Export Image memberi Anda PNG yang cocok untuk moodboard atau tangkapan layar. Untuk ekspor ramah-token (format W3C Design Token Community Group), salin kode hex dan adaptasi di Tokens Studio atau Style Dictionary.

Berapa banyak warna yang harus dimiliki palet?

Tiga hingga lima untuk sebagian besar situs web dan aplikasi: warna merek utama, aksen atau sekunder, netral untuk teks, dan satu atau dua netral utilitas (border, latar belakang). Sistem desain yang lebih besar menggunakan 9 hingga 12 token bernama (primer, sekunder, sukses, peringatan, kesalahan, info, ditambah netral). Alat dimulai pada lima tetapi Add Color memperluasnya.

Apa itu OKLCH dan apakah saya harus menggunakannya?

OKLCH adalah ruang warna yang seragam secara perseptual yang ditambahkan ke CSS pada tahun 2023. Tidak seperti HSL, dua warna OKLCH dengan nilai L yang sama benar-benar terlihat sama terangnya. Untuk sistem desain dan skala tonal yang konsisten itu adalah praktik terbaik baru. Dukungan browser universal dalam versi saat ini (Chrome 111+, Safari 15.4+, Firefox 113+). Untuk fallback yang anggun di browser yang lebih tua, kirim nilai hex sRGB di samping oklch().

Alat Terkait