Generator Palet Warna
Buat palet warna dari warna dasar dengan harmoni komplementer, analog, triadik, tetradik, persegi, atau monokromatik. Kunci warna dan ekspor ke CSS/Tailwind.
Pengaturan palet
Rona dasar + rona yang berlawanan (180°).
Kunci warna yang Anda suka; Buat ulang memilih warna dasar acak baru dan mempertahankan warna yang dikunci.
Ekspor
Palet
:root {
--palette-1: #3b82f6;
--palette-2: #b07d00;
}Alat Terkait
Lihat SemuaApa itu Generator Palet Warna?
Membuat palet dari satu warna dasar menggunakan harmoni roda warna klasik. Rotasi rona dapat dilakukan dalam OKLCH yang perseptual (menjaga kecerahan yang dirasakan tetap sama) atau HSL klasik. Warna dapat dikunci sebelum dibuat ulang, dan palet bisa diekspor sebagai variabel CSS, SCSS, konfigurasi Tailwind v3, @theme Tailwind v4, atau JSON.
Cara menggunakan Generator Palet Warna
- Masukkan Warna dasar (hex, rgb(), hsl(), atau oklch()) atau klik buat ulang untuk warna acak.
- Pilih Harmoni warna dan apakah rona diputar dalam OKLCH atau HSL.
- Kunci warna yang ingin dipertahankan; pembuatan ulang hanya mengganti warna yang tidak terkunci.
- Klik sebuah swatch untuk menyalin nilai hex-nya.
- Pilih Format ekspor dan Nama token, lalu salin kodenya.
Contoh
Base #ff0000, Triadic, HSL
:root {
--palette-1: #ff0000;
--palette-2: #00ff00;
--palette-3: #0000ff;
} Kapan menggunakan Generator Palet Warna
Gunakan untuk menjelajahi skema warna bagi merek, tema UI, atau ilustrasi. Harmoni hanyalah titik awal, bukan pemeriksaan aksesibilitas: periksa kontras teks/latar secara terpisah. Untuk mengembangkan satu warna menjadi skala 50–950, gunakan Generator Gradasi Warna.
Cara kerja Generator Palet Warna
Harmoni memutar rona dasar dengan sudut tetap sambil mempertahankan saturasi/chroma dan lightness: komplementer 0°/180°, analog 0°/±30°/±60°, triadik 0°/120°/240°, komplementer terbagi 0°/150°/210°, tetradik 0°/60°/180°/240°, persegi 0°/90°/180°/270°. Monokromatik mempertahankan rona dan mengubah lightness sebesar −30, −15, 0, +15, +30 (HSL %) atau ±0,15/±0,3 (L pada OKLCH). Warna OKLCH di luar sRGB dipetakan ke gamut dengan mengurangi chroma. Pembuatan ulang memilih warna dasar acak dengan rona 0–360°, saturasi 55–85%, dan lightness 45–60%.
Kasus Penggunaan Umum
- Eksplorasi warna merek dari warna logo
- Warna aksen untuk tema UI
- Warna kategori untuk visualisasi data
- Mengekspor palet sebagai CSS custom properties
- Menyiapkan tema Tailwind
Pertanyaan Umum
Sebaiknya memutar rona dalam OKLCH atau HSL?
OKLCH menjaga kecerahan yang dirasakan dari semua warna tetap sama, sehingga palet lebih seimbang. HSL sesuai dengan roda warna klasik yang dipakai banyak alat desain, tetapi kecerahan warnanya bisa sangat berbeda-beda.
Apa fungsi mengunci?
Swatch yang terkunci mempertahankan warnanya saat Anda mengubah warna dasar, harmoni, atau membuat ulang palet.
Apakah paletnya aksesibel?
Harmoni tidak menjamin apa pun tentang kontras. Periksa kombinasi teks dan latar terhadap rasio kontras WCAG sebelum memakainya.