Apa itu Pencari Warna Tailwind?

Tailwind Color Finder menerima nilai warna apa pun — hex, rgb(), hsl(), atau nama CSS seperti teal — lalu langsung menemukan kelas utilitas Tailwind CSS terdekat. Tidak perlu membandingkan palet dengan mata; tempelkan nilai dari alat desain dan dapatkan nama kelas yang siap dipakai di kode.

Pencocokan memakai jarak persepsi ΔE di ruang CIE Lab, bukan pengurangan RGB mentah, jadi hasilnya mendekati apa yang dilihat mata sebagai mirip, bukan yang paling dekat secara angka. Seluruh palet bawaan Tailwind v3/v4 ditelusuri, semua keluarga dari slate hingga rose, naungan 50 sampai 950, ditambah hitam dan putih. Sepuluh kandidat teratas ditampilkan dengan skor jarak untuk menimbang antara nada dan kecerahan.

Cara menggunakan

1. Masukkan kode warna hex dari mockup desain Anda atau pilih warna menggunakan color picker.
2. Alat ini langsung menampilkan kelas warna Tailwind CSS terdekat dengan perbandingan visual secara berdampingan.
3. Salin nama kelas Tailwind (misalnya bg-blue-500) langsung ke kode Anda. Lihat jarak warna untuk menilai seberapa dekat kecocokannya.

Kapan menggunakan

• Mengubah kode hex brand atau Figma menjadi kelas Tailwind di proyek baru.
• Mengaudit stylesheet lama berisi nilai hex acak dan memindahkannya ke kelas utilitas.
• Memilih nuansa semantis yang pas (red-500 vs rose-500) saat desainer hanya memberi satu hex.

Hasil

Desainer Anda memberikan warna brand #2563EB. Tempel kode tersebut dan alat menunjukkan bahwa warna ini cocok persis dengan blue-500. Untuk #3A7BC8, alat menemukan sky-600 sebagai kecocokan terdekat dengan skor jarak yang menunjukkan seberapa dekat hasilnya.

FAQ

Bagaimana tool menentukan warna Tailwind yang paling dekat?

Kedua hex dikonversi ke CIE Lab lalu dihitung jarak ΔE76, ukuran persepsi yang mendekati perbedaan visual antar dua warna. ΔE di bawah 1 hampir tidak terbedakan, sedangkan di atas 5 perbedaan nada atau kecerahan sudah cukup jelas.

Versi palet Tailwind apa yang dipakai?

Palet bawaan v3/v4: 22 keluarga warna (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) pada naungan 50 sampai 950, ditambah hitam dan putih. Warna kustom dari tema proyek tidak ikut dicari.

Kenapa hex saya cocok dengan naungan yang tak terduga?

Jarak Lab menimbang nada, saturasi, dan kecerahan sekaligus. Hijau redup bisa lebih dekat ke slate daripada teal cerah karena perbedaan kecerahannya dominan. Kalau pilihan pertama terasa janggal, lihat sepuluh teratas dan pilih berdasarkan keluarga warna.

Bisakah hasilnya disalin sebagai variabel CSS, bukan kelas Tailwind?

Panel rincian menampilkan nama kelas (bg-blue-500) sekaligus hex-nya. Salin hex lalu balut dengan var(--brand) jika alur kerja Anda memakai CSS custom property dan bukan utilitas langsung. Dan saat tidak ada warna palet yang cukup dekat, alat ini menampilkan kelas nilai arbitrer (bg-[#hex]) dari warna persismu, sehingga tetap presisi tanpa mengutak-atik tema.

Bisakah saya menempelkan rgb(), hsl(), atau nama warna CSS alih-alih hex?

Bisa. Kolomnya mengenali hex (#2563EB atau 2563EB, 3 atau 6 digit), rgb()/rgba(), hsl()/hsla() dengan derajat atau hue tanpa satuan, serta seluruh warna bernama CSS (teal, rebeccapurple, cornflowerblue, dan seterusnya). Saluran alfa diabaikan — pencocokan dijalankan pada nilai RGB padat ekuivalennya.

Alat terkait