Palet Warna Pembangkit
Hasilkan skala warna profesional untuk sistem desain, Tailwind CSS, dan token desain
Algoritma
Tingkat Kontras
Hitungan Naungan
Tentang Generator Palet Warna
Apa itu Generator Palet Warna?
Generator palet warna menciptakan skala warna profesional dari satu warna dasar. Ini menghasilkan beberapa corak (biasanya 50-950) yang bekerja sama secara harmonis dalam sistem desain, memastikan konsistensi di seluruh aplikasi Anda.
Bagaimana cara menggunakan skala 50-950 ?
Skala 50-950 memberikan nuansa 11 dengan 50 paling terang dan 950 paling gelap. Biasanya, bayangan 500 atau 600 mewakili warna dasar Anda. Gunakan warna yang lebih terang (50-400) untuk latar belakang dan elemen halus, dan warna yang lebih gelap (600-950) untuk teks, batas, dan penekanan.
Apa itu OKLCH?
OKLCH adalah ruang warna modern yang memberikan warna yang seragam. Berbeda dengan HSL, OKLCH memastikan bahwa warna dengan nilai kecerahan yang sama tampak sama terangnya di mata manusia, sehingga ideal untuk menghasilkan palet warna yang mudah diakses dan seimbang secara visual.
Bagaimana cara mengekspor untuk Tailwind CSS?
Gunakan opsi ekspor "Tailwind CSS" untuk mendapatkan konfigurasi siap pakai. Salin kode yang dihasilkan ke file tailwind.config.js Anda di bawah theme.extend.colors. Untuk Tailwind CSS v4, gunakan format ekspor "@theme" dengan variabel CSS.
Bagaimana cara menggunakan CSS Variables?
CSS Variables (Properti Kustom) memungkinkan Anda menentukan warna satu kali dan menggunakannya kembali di seluruh stylesheet Anda. Ekspor sebagai "CSS Variables" dan tambahkan kode yang dihasilkan ke file CSS global Anda. Kemudian referensi warna menggunakan var(--primary-500) di gaya Anda.
Bagaimana cara menghasilkan palet untuk mode gelap?
Untuk mode gelap, pilih warna dasar yang lebih gelap atau gunakan algoritma "Mode Gelap Siap". Algoritme ini menghasilkan rona yang dioptimalkan untuk latar belakang gelap, memastikan rona terang memiliki kontras yang memadai. Anda juga dapat menggunakan Pratinjau UI untuk menguji palet Anda dalam mode gelap.
Apa perbedaan antara OKLCH dan HSL?
HSL (Hue, Saturation, Lightness) adalah ruang warna lama yang mana warna dengan nilai kecerahan yang sama mungkin tampak berbeda kecerahannya. OKLCH secara persepsi seragam, memastikan warna dengan nilai kecerahan yang sama tampak sama cerahnya, sehingga menghasilkan palet yang lebih harmonis dan mudah diakses.
Bagaimana cara memastikan aksesibilitas warna?
Gunakan tab "Kontras" untuk memeriksa apakah kombinasi warna Anda memenuhi standar WCAG AA (4.5:1) atau AAA (7:1). Alat ini secara otomatis menunjukkan warna mana yang aman untuk teks putih atau hitam, dan memberikan rekomendasi untuk memastikan desain Anda dapat diakses oleh semua pengguna.
Berapa banyak corak yang harus saya gunakan dalam sistem desain saya?
Skala warna 11 default (50-950) ideal untuk sebagian besar sistem desain, menawarkan fleksibilitas yang cukup tanpa berlebihan. Untuk proyek yang lebih kecil, 9 warna mungkin cukup. Untuk sistem kompleks dengan banyak variasi, warna 11 memberikan perincian yang memadai untuk semua kasus penggunaan.
Bisakah saya menggunakan palet ini secara komersial?
Iya! Palet yang dihasilkan 100% gratis untuk penggunaan komersial dan pribadi. Anda memiliki kepemilikan penuh atas warna yang dihasilkan dan dapat menggunakannya dalam proyek apa pun, termasuk produk komersial, situs web, aplikasi, dan materi pemasaran tanpa batasan.