Grafik / Warna

Generator Palet Warna: Skema Harmonis dalam Satu Klik

Buat palet warna berdasarkan teori warna: analogus, komplementer, triadik, komplementer terpisah, monokrom, atau acak, dengan tiga hingga delapan warna. Kunci warna yang Anda suka dan buat ulang sisanya, periksa kontras setiap warna dengan putih, lalu ekspor9?

Generator Palet Warna: Skema Harmonis dalam Satu Klik: Setiap palet dimulai dari hue dasar, yang diambil dari warna terkunci jika ada, lalu menempatkan hue lainnya berdasarkan aturan yang dipilih: langkah 30° untuk analogus, hue berlawanan untuk komplementer, langkah 120° untuk triadik, 150° ke kedua sisi untuk komplementer terpisah, atau satu hue dari gelap ke terang untuk monokrom. Lightness dan saturation bervariasi agar kumpulan warna memiliki warna terang, sedang, dan gelap, dan setiap warna menampilkan rasio kontras WCAG terhadap putih. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori
Tools developer
Dijalankan
Di browser Anda
Biaya
Gratis · tanpa daftar
Ketersediaan
Siap digunakan
Studio palet warnaPemrosesan lokal

Berjalan sepenuhnya di browser Anda

Atau tekan spasi. Kunci warna yang ingin dipertahankan.

#64A6F52.5:1 pada latar putih
#382B9D10.5:1 pada latar putih
#772BB77.5:1 pada latar putih
#BE4BBA4.3:1 pada latar putih
#E0367B4.2:1 pada latar putih
:root {
  --color-1: #64a6f5;
  --color-2: #382b9d;
  --color-3: #772bb7;
  --color-4: #be4bba;
  --color-5: #e0367b;
}

Menggunakan palet

Pembagian yang umum adalah sekitar 60% untuk satu warna netral, 30% untuk warna kedua, dan 10% untuk warna aksen, sehingga warna terkuat digunakan secukupnya untuk tombol dan highlight.

Kontras

Rasio 4,5:1 adalah minimum WCAG AA untuk teks normal dan 3:1 untuk teks besar; rasio 7:1 memenuhi AAA.

Cara menggunakannya

  1. Pilih harmoni dan jumlah warna.
  2. Tekan buat atau tekan spasi sampai Anda menyukainya; kunci warna yang ingin dipertahankan.
  3. Salin palet sebagai kode atau download sebagai PNG.

Privasi & batasan

Semuanya dibuat di browser Anda.

Alat terkait

Pengekstrak PaletGradasi CSSWarna Tailwind

Pertanyaan umum

Bagaimana cara mempertahankan warna yang saya suka?

Klik ikon kunci pada warna tersebut. Warna yang dikunci akan tetap, dan warna pertama juga menetapkan hue dasar yang menjadi acuan warna lainnya.

Bisakah saya menggunakan warna merek saya?

Bisa: klik swatch untuk mengaturnya ke warna apa pun, kunci warna tersebut, lalu buat warna lainnya berdasarkan warna itu.

Apakah teks pada palet mudah dibaca?

Setiap swatch menampilkan rasio kontrasnya dengan putih. WCAG mensyaratkan setidaknya 4,5:1 untuk teks normal, sehingga warna di bawah rasio tersebut memerlukan teks gelap di atasnya.

Alat gratis · berjalan di browser anda · tanpa perlu akun