CodeKitHubApa Itu Alat Ini?
Tailwind CSS menyediakan skala warna default tetap alih-alih membiarkan Anda memilih nilai sembarang untuk warna UI umum. Setiap 22 keluarga bernama (seperti amber atau slate) memiliki tepat 11 tingkat, bernomor 50 hingga 950, dan setiap tingkat memiliki satu nilai hex resmi yang didokumentasikan oleh Tailwind sendiri dan digunakan secara identik di seluruh utilitas bg-, text-, border-, dan ring-.
Referensi ini menyematkan palet resmi lengkap tersebut secara lokal, sehingga mencari warna atau nama kelas tidak memerlukan membuka dokumentasi Tailwind, menjalankan build, atau mengirimkan kelas melalui PurgeCSS hanya untuk melihat tampilannya. Pencarian hex menggunakan jarak Euclidean RGB untuk menemukan tingkat resmi terdekat, dan pencarian kelas bersifat tepat — setiap nilai di sini sesuai dengan default yang didokumentasikan Tailwind.
Mengapa Menggunakannya?
- Tempel kode hex dari file desain atau tangkapan layar dan segera dapatkan nama kelas Tailwind terdekat, alih-alih menebak tingkat bernomor mana yang sesuai.
- Ketik nama kelas seperti slate-900 atau bg-purple-500 untuk melihat nilai hex dan RGB yang tepat tanpa menggali dokumentasi Tailwind.
- Jelajahi kisi 22 keluarga x 11 tingkat secara lengkap untuk membandingkan tingkat secara berdampingan sebelum memilih.
- Dapatkan varian bg-, text-, border-, dan ring- untuk tingkat apa pun dalam satu klik, karena Tailwind menggunakan skala numerik yang sama di semuanya.
- Gratis, instan, dan sepenuhnya lokal — tanpa unggah, tanpa akun, tanpa langkah build.
Cara Menggunakan
- Untuk menemukan nama kelas dari kode hex: ketik atau tempel nilai hex (dengan atau tanpa #) ke kotak pencarian — tingkat resmi Tailwind terdekat akan muncul di atas kisi, beserta jarak warna jika bukan kecocokan tepat.
- Untuk menemukan nilai hex dari nama kelas: ketik nama kelas atau keluarga (misalnya amber-500, bg-blue-600, atau cukup teal) — kecocokan tepat menampilkan hex, RGB, dan semua varian utilitas; nama keluarga saja akan memfilter kisi ke keluarga tersebut.
- Untuk menjelajahi semuanya: biarkan kotak pencarian kosong dan klik contoh warna mana pun di kisi — detailnya muncul di panel atas dan kode hex-nya disalin otomatis.
- Klik salah satu tombol varian bg-/text-/border-/ring- di panel detail untuk menyalin nama kelas yang tepat.
Contoh
Input
#c4b5fdOutput
violet-300 — Kecocokan tepat, #C4B5FD, rgb(196, 181, 253)Kode hex ini adalah salah satu nilai default resmi Tailwind yang terdokumentasi, jadi jaraknya 0 dan kecocokannya tepat, bukan perkiraan.
Pertanyaan yang Sering Diajukan
Apakah ini warna default resmi Tailwind CSS?
Ya — semua 242 nilai hex (22 keluarga x 11 tingkat) berasal dari palet default resmi Tailwind yang terdokumentasi. Tailwind v4 merepresentasikan warna secara internal sebagai OKLCH, tetapi palet default yang sama dan padanan hex terdokumentasinya tidak berubah sejak v3, jadi nilai-nilai ini berlaku untuk kedua versi.
Apa artinya jika pencarian hex bukan kecocokan tepat?
Jika Anda menempel kode hex yang bukan salah satu dari 242 nilai default Tailwind (misalnya warna merek khusus), alat ini menampilkan tingkat resmi terdekat berdasarkan jarak RGB dan memberi label "Kecocokan terdekat" beserta jaraknya — hasilnya tidak akan identik piksel demi piksel dengan input Anda, hanya default Tailwind terdekat.
Mengapa bg-, text-, border-, dan ring- semuanya menggunakan angka yang sama?
Tailwind menerapkan satu skala warna bersama di seluruh kategori utilitas, sehingga bg-amber-500, text-amber-500, border-amber-500, dan ring-amber-500 semuanya adalah nilai hex dasar yang sama yang diterapkan ke properti CSS yang berbeda. Itulah sebabnya panel detail menampilkan keempat varian bersama-sama untuk tingkat mana pun yang Anda cari.
Bisakah saya mencari grup keluarga seperti "blue" saja tanpa nomor tingkat?
Ya — mengetik nama keluarga saja (tanpa angka) memfilter kisi hingga hanya 11 tingkat keluarga tersebut sehingga Anda dapat membandingkannya berdampingan, tanpa memilih satu tingkat tertentu terlebih dahulu.
Apakah ini mencakup warna tema Tailwind khusus yang saya definisikan dalam konfigurasi saya?
Tidak — referensi ini hanya mencakup palet default bawaan Tailwind, bukan warna yang Anda tambahkan atau timpa di blok tailwind.config.js theme.extend.colors atau blok @theme di v4. Jika proyek Anda menyesuaikan palet, warna hasil render sebenarnya mungkin berbeda dari yang ditampilkan di sini untuk nama kelas yang sama.