Pembuat Warna Tailwind
Buat palet 11 gradasi Tailwind CSS dari 50 hingga 950 dan kode konfigurasi dari satu kode Hex
Fitur
Buat 11 gradasi otomatis dari 1 warna
Tempatkan warna masukan di 500 dan hitung kedalaman warna dari 50 hingga 950
Mendukung format v3 dan v4
Beralih antara cara menulis config dan @theme di tab
Salin Hex per gradasi
Salin kode warna satu per satu dengan tombol di setiap sampel warna
Palet diperbarui saat menginput
Bandingkan sambil mencoba warna tanpa memerlukan tombol eksekusi
Cara Penggunaan
Masukkan Hex warna dasar
Masukkan kode Hex atau klik sampel warna di sisi kiri untuk memilih dengan color picker
Masukkan nama warna jika diperlukan
Masukkan nama warna dalam huruf kecil untuk digunakan dalam kode. Jika kosong, akan menggunakan primary
Konfirmasi sampel warna 11 gradasi
Konfirmasi sampel warna dan kode Hex dari 50 hingga 950, lalu salin satu per satu dengan tombol salin di sampel
Pilih format keluaran dan salin
Pilih v3 atau v4 dan salin dengan "Salin Kode" ke tailwind.config.js atau file CSS
Kasus Penggunaan
Membuat gradasi warna merek
Satukan gradasi yang digunakan untuk hover tombol dan latar belakang dari satu warna merek
Menambahkan warna yang tidak ada dalam palet standar
Tambahkan warna unik proyek yang tidak ada di warna standar Tailwind ke file konfigurasi dengan 11 gradasi
Membuat konfigurasi @theme v4
Buat variabel CSS Tailwind v4 sekaligus dari warna utama situs
Persiapan implementasi desain comp
Siapkan kode 11 gradasi untuk implementasi dari warna yang ditentukan di comp, dan transfer juga ke alat desain
Pengetahuan Dasar
Apa yang diwakili oleh 50–950 Tailwind
Warna Tailwind CSS diwakili oleh 11 tingkatan angka dari 50 paling terang hingga 950 paling gelap untuk menunjukkan kecerahan, dan 500 adalah warna dasarnya. Angka digunakan di akhir nama kelas seperti "bg-primary-500" atau "text-primary-700".
- Tingkatan 50–300：Tingkatan 50–300 adalah warna terang yang sering digunakan untuk warna latar belakang atau cat tipis, dan merupakan warna yang mudah dibaca bahkan ketika teks gelap ditempatkan di atasnya.
- Tingkatan 600–950：Tingkatan 600–950 adalah warna gelap yang sering digunakan untuk status hover tombol atau warna teks judul, dan merupakan warna yang terlihat jelas di latar belakang putih.
Perbedaan cara mendefinisikan warna antara v3 dan v4
Di Tailwind CSS v3, warna didefinisikan dalam JavaScript di tailwind.config.js, dan di v4 didefinisikan sebagai variabel CSS dalam @theme di file CSS. Dengan cara menulis mana pun, warna yang ditentukan dapat digunakan dengan nama kelas yang sama seperti "bg-primary-500".
- Cara menulis v3：Cara menulis v3 adalah format di mana nama warna dan tingkat ditulis bersarang seperti "primary: { 500: '#3B82F6' }" dalam theme.extend.colors.
- Cara menulis v4：Cara menulis v4 adalah format di mana nama warna dan tingkat ditulis sebagai nama variabel yang digabung dengan tanda hubung seperti "--color-primary-500: #3B82F6;" dalam @theme.
Keamanan dan Privasi
Diproses di peramban
Data yang Anda masukkan hanya diproses di dalam peramban Anda dan tidak dikirim ke luar.
Diproses hanya di dalam browser
Perhitungan palet dan pembuatan kode dilakukan sepenuhnya di dalam browser Anda, dan data input tidak dikirim ke server.
Komunikasi dienkripsi dengan HTTPS
Pemuatan halaman juga dienkripsi dengan TLS, sehingga konten tidak dapat dibaca oleh pihak ketiga.
Tidak ada pengiriman ke pihak ketiga
Konten input tidak dikirim ke layanan eksternal seperti jaringan iklan atau pelacak.
Tidak ada penyimpanan hasil otomatis
Warna dan nama warna yang dimasukkan dan saran input tidak disimpan di server.
Ikuti RAKKOTOOLS di Penelusuran Google
186 alat praktis yang mudah ditemukan dari Penelusuran Google dan pencarian AI!
- Ditemukan di penelusuran
- Juga ditampilkan di pencarian AI
- Temukan alat baru
Informasi pembaruan
- update #318
Tambahkan pembuat warna Tailwind, buat 11 gradasi warna dan kode pengaturan dari 1 warna