Referensi Palet Warna CSS Tailwind

• Referensi Warna Tailwind Lengkap: Jelajahi 22 kelompok warna Tailwind CSS dengan 242 contoh warna individual. Tiap rangkaian menampilkan spektrum penuh mulai dari warna 50 (paling terang) hingga 950 (paling gelap), sehingga memudahkan untuk membandingkan dan memilih warna yang sempurna untuk desain Anda.
• Pencarian & Filter Instan: Cari berdasarkan nama keluarga warna atau nilai HEX, atau filter berdasarkan kategori (Abu-abu Netral, Hangat, Hijau, Biru, Ungu). Referensi diperbarui seketika saat Anda mengetik, hanya menampilkan keluarga yang cocok dengan rentang warna lengkapnya.
• 100% Pribadi - Tanpa Unggahan: Semua data warna dimasukkan ke dalam halaman dan diproses secara lokal di browser Anda. Tidak ada data yang dikirim ke server mana pun - aman untuk proyek klien dan sistem desain berpemilik.
• Gratis & Selalu Tersedia: Akses referensi palet warna Tailwind CSS lengkap kapan saja, tanpa mendaftar, tanpa berlangganan, dan tanpa batasan penggunaan. Sepenuhnya gratis selamanya tanpa iklan yang memblokir antarmuka.

• Pengembangan Tailwind CSS: Pengembang Tailwind menggunakan referensi palet warna untuk dengan cepat menemukan nilai HEX warna yang tepat untuk kelas utilitas mereka. Daripada menghafal kode hex seperti #3b82f6 untuk blue-500, telusuri palet visual dan salin nilainya dengan satu klik.
• Serah Terima Desain ke Pengembangan: Desainer menggunakan referensi warna Tailwind untuk mencocokkan desain Figma atau Sketsa mereka dengan warna Tailwind yang paling mendekati. Palet visual memudahkan untuk mengidentifikasi warna mana yang akan digunakan untuk implementasi yang konsisten antara desain dan kode.
• Konfigurasi Tema Khusus: Saat memperluas tema Tailwind default, pengembang menggunakan referensi warna untuk memilih warna khusus yang selaras dengan nuansa Tailwind yang ada. Telusuri kelompok terkait untuk menemukan warna yang secara alami sesuai dengan palet luas Anda.
• Dokumentasi Sistem Desain: Insinyur sistem desain menggunakan referensi warna sebagai pencarian cepat untuk mendokumentasikan token desain berbasis Tailwind. Tampilan keluarga yang terorganisir memudahkan referensi dan mendokumentasikan skala warna untuk tim Anda.
• Pemeriksaan Aksesibilitas & Kontras: Pakar aksesibilitas menggunakan referensi warna Tailwind untuk mengidentifikasi kombinasi warna yang memenuhi persyaratan kontras WCAG. Kisaran warna penuh memudahkan untuk menemukan varian lebih terang atau lebih gelap yang mempertahankan kontras yang cukup.
• Pembelajaran & Eksplorasi Warna: Mahasiswa desain dan pengguna baru Tailwind menggunakan referensi warna untuk memahami sistem warna Tailwind. Jelajahi bagaimana setiap kelompok berkembang dari terang ke gelap, dan pelajari kelompok mana yang paling cocok untuk berbagai elemen UI.

Palet warna Tailwind CSS adalah kumpulan kelompok warna yang dikurasi dengan cermat dan dirancang untuk pengembangan web modern. Ini mencakup 22 kelompok warna, masing-masing dengan 11 corak mulai dari 50 (paling terang) hingga 950 (paling gelap) - total 242 warna. Paletnya mencakup spektrum penuh mulai dari abu-abu sejuk dan warna primer cerah hingga warna pastel halus dan gelap pekat, semuanya dirancang untuk bekerja sama secara harmonis.

1. Telusuri menurut kelompok: Masing-masing dari 22 kelompok (batu tulis, abu-abu, merah, biru, dll.) ditampilkan sebagai kartu yang menunjukkan rentang warna lengkap dari 50 hingga 950. Deskripsi menjelaskan karakter dan kasus penggunaan terbaik untuk setiap kelompok warna.
2. Cari atau filter: Gunakan bilah pencarian untuk menemukan keluarga berdasarkan nama atau nilai HEX. Gunakan filter kategori (Abu-abu Netral, Hangat, Hijau, Biru, Ungu) untuk mempersempit kelompok warna terkait. Semua pemfilteran diperbarui secara instan.
3. Menyalin warna apa pun: Arahkan kursor ke contoh warna mana pun dan klik untuk menyalin nilai HEX ke clipboard Anda. Anda juga dapat menggunakan tombol Copy HEX di bawah setiap kolom warna. Toast konfirmasi visual muncul saat warna disalin.

• Nama keluarga: Warna dikelompokkan ke dalam keluarga seperti biru, merah, abu-abu, dan zamrud. Setiap keluarga mewakili rona berbeda dengan saturasi yang konsisten di seluruh coraknya.
• Nomor warna: Tiap kelompok warna berisi 11 warna bernomor 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, dan 950. Warna 500 biasanya merupakan warna “dasar”, dengan angka yang lebih rendah merupakan varian yang lebih terang (warna) dan angka yang lebih tinggi adalah varian yang lebih gelap (warna).
• Sintaks kelas utilitas: Di Tailwind CSS, warna digunakan sebagai kelas utilitas seperti bg-blue-500, text-gray-900, atau border-emerald-300. Nomor bayangan berhubungan langsung dengan akhiran kelas.
• Penyesuaian: Tailwind memungkinkan perluasan atau penggantian warna default ini di tailwind.config.js Anda, sehingga Anda dapat mempertahankan konvensi penamaan yang sama dengan warna merek Anda.

Nuansa 50-200 paling cocok untuk warna latar belakang, status hover yang halus, dan pengisian elemen UI yang ringan. Mereka memberikan warna yang cukup untuk terlihat tanpa konten yang berlebihan. Gunakan ini untuk latar belakang kartu, striping baris tabel, dan efek navigasi hover.

Nuansa 300-500 ideal untuk warna primer, tombol, tautan, dan elemen UI berbobot sedang. Warna 500 adalah default untuk sebagian besar utilitas warna Tailwind dan memberikan keseimbangan terbaik antara visibilitas dan keserbagunaan.

Nuansa 600-950 cocok untuk teks, batas, dan elemen kontras tinggi. Gunakan warna yang lebih gelap untuk teks isi yang mudah dibaca (biasanya abu-abu-700 hingga abu-abu-900) dan untuk elemen aksen yang perlu menonjol dibandingkan latar belakang yang lebih terang. Warna 950 ditambahkan di Tailwind v3.3 untuk opsi yang lebih gelap.