Cara menggunakan Palet warna & cek kontras
- 1
Mulai dari satu warna
Ketik atau pilih Warna dasar, lalu pilih Harmoni seperti Analogus, Triadik, atau Komplementer terpisah — atau acak sebuah palet lewat Palet acak.
- 2
Kunci dan sempurnakan
Kunci swatch yang Anda suka sebelum mengacak lagi, ubah swatch mana pun secara langsung, atau ambil lima warna dominan dari sebuah foto lewat Dari gambar.
- 3
Periksa keterbacaan
Buka Kontras untuk menguji teks pada latar belakang terhadap WCAG 2.2 AA dan AAA, terapkan saran perbaikan, lalu pratinjau palet untuk buta warna.
- 4
Ekspor
Salin Variabel CSS, tema Tailwind v4 atau konfigurasi v3, SCSS, atau JSON dengan gradasi 50–950, atau unduh Swatch PNG.
Batas dan Pro
Semuanya gratis: palet 5 warna, 6 harmoni, pengacakan dan ekspor tanpa batas, gambar hingga 50 MB untuk pengambilan warna, Swatch PNG selebar 1600 piksel.
Tentang Palet warna & cek kontras
Generator palet warna ini membuat skema lima warna beserta semua yang dibutuhkan sebuah sistem desain. Harmoni memutar rona dasar pada roda warna HSL: Analogus bergeser 30° ke kedua sisi, Komplementer menambahkan rona di seberangnya, Komplementer terpisah mengambil dua rona di samping rona seberang, Triadik membagi tiga rona berjarak 120°, Tetradik memakai bujur sangkar 90°, dan Monokrom mempertahankan satu rona dalam lima tingkat kecerahan. Mode acak menghormati swatch yang dikunci, dan opsi gambar mengelompokkan piksel sebuah foto dalam OKLab untuk menemukan lima warna berbeda yang paling umum.
Untuk setiap warna, tab Gradasi menghasilkan tangga 11 tingkat 50–950 dalam OKLCH, dengan tingkat terdekat dari warna Anda berisi nilai yang persis sama, atau 13 nada sistem HCT Material 3 beserta lima palet kunci yang akan diturunkan oleh tema Material. Pemeriksa kontras memakai rumus luminans WCAG 2.2, tidak pernah membulatkan rasio ke atas, dan menyarankan warna lolos terdekat dengan mengubah kecerahan saja, sehingga rona tetap sama. Sebuah kisi menampilkan rasio setiap pasangan dalam palet terhadap warna putih dan hitam.
Simulasi mencakup protanopia, deuteranopia, tritanopia, dan akromatopsia dengan matriks Machado, serta menandai swatch yang tampak menyatu satu sama lain. Ekspor menamai warna berdasarkan rona dan menerima nama buatan Anda sendiri. Alat ini tidak menilai apakah warna cocok untuk sebuah merek, dan simulasi hanya memperkirakan cara orang dengan gangguan penglihatan warna melihat; simulasi bukan pengganti pengujian langsung dengan mereka.
Privasi
Semua perhitungan warna, pemeriksaan kontras, dan analisis gambar berjalan di tab ini: foto yang Anda pakai untuk mengambil warna dibaca dari disk Anda ke kanvas kecil dan tidak pernah diunggah. Palet dapat disimpan di alamat halaman agar tautan yang disalin bisa membukanya kembali; tidak ada yang disimpan di server.
Fitur
Enam harmoni dan warna dari gambar
Dari Analogus sampai Tetradik dengan satu Warna dasar, pengacakan dengan kunci, atau warna dominan dari sebuah foto.
Kontras WCAG 2.2 dengan perbaikan
AA dan AAA untuk teks normal dan besar serta grafik UI, dengan warna lolos terdekat hanya sekali klik.
Ekspor siap pakai untuk developer
Variabel CSS, Tailwind v4 dan v3, SCSS, dan JSON dalam HEX, RGB, HSL, atau OKLCH, plus Swatch PNG.