Pencari Warna Tailwind CSS Temukan kelas warna CSS Tailwind yang paling dekat untuk kode HEX apa pun.

🎨

Pencari Warna Tailwind

Temukan kelas warna CSS Tailwind yang paling dekat untuk kode HEX apa pun.

Masukkan Warna Anda

Ketik kode HEX atau gunakan pemilih warna.

Lihat Pertandingan

Lihat 10 warna Tailwind CSS terdekat yang diurutkan berdasarkan jarak.

Salin Nama Kelas

Salin nama kelas warna Tailwind (misalnya, blue-500) untuk proyek Anda.

Loading tool...

What Is Pencari Warna Tailwind?

Pencari Warna Tailwind CSS mencocokkan warna HEX apa pun dengan warna terdekat dalam palet default Tailwind CSS. Tailwind menyertakan 22 keluarga warna (slate, abu-abu, seng, merah, oranye, dll.) masing-masing dengan 11 nuansa (50-950), total 242 warna yang telah ditentukan sebelumnya. Alat ini menghitung jarak RGB Euklides antara warna input Anda dan setiap warna Tailwind, memeringkatkan 10 pertandingan terdekat. Ini sangat berharga bagi pengembang yang bermigrasi ke desain Tailwind, mencocokkan warna merek dengan kelas Tailwind, atau menemukan kelas utilitas Tailwind yang tepat untuk spesifikasi desain. Setiap pertandingan menampilkan sampel visual, nama kelas Tailwind (misalnya, biru-500), nilai HEX sebenarnya, dan metrik jarak sehingga Anda dapat menilai kualitas pertandingan.

Why Use Pencari Warna Tailwind?

Mencari semua 242 warna palet default Tailwind untuk mencocokkan yang terdekat
Perbandingan visual samping-samping antara input vs. warna Tailwind
Menampilkan nama kelas Tailwind yang tepat siap digunakan dalam kode
Metric jarak membantu menilai kualitas kecocokan
10 hasil teratas untuk memilih kecocokan terbaik

Common Use Cases

Desain ke Tailwind

Konversi warna desain Figma/Sketch ke kelas utilitas Tailwind yang terdekat.

Integrasi Merek

Temukan warna Tailwind yang terdekat dengan pedoman merek untuk prototipe cepat.

Migrasi Warisan

Peta warna CSS yang ada ke setara Tailwind selama migrasi kerangka kerja.

Eksplorasi Warna

Temukan warna Tailwind yang serupa dengan warna yang Anda sukai untuk gaya utilitas pertama yang konsisten.

Technical Guide

Pencari menghitung jarak Euklides dalam ruang warna RGB: D = sqrt((R1-R2)² + (G1-G2)² + (B1-B2)²) antara warna input dan setiap dari 242 warna palet default Tailwind. Hasil diurutkan berdasarkan jarak yang meningkat. Jarak 0 berarti pertandingan yang tepat. Jarak di bawah 20 adalah pertandingan yang sangat dekat; lebih dari 50 berarti perbedaan yang terlihat. Palet Tailwind disusun menjadi 22 keluarga warna dengan 11 nuansa masing-masing (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). Nuansa 500 biasanya merupakan "warna dasar" dari setiap keluarga. Warna Tailwind 3.x dirancang dengan keseragaman perseptual, yang berarti langkah nuansa yang sama (misalnya, 400 hingga 500) menghasilkan perbedaan kecerahan visual yang kira-kira sama di semua keluarga warna.

Tips & Best Practices

1
Jarak di bawah 10 berarti warna Tailwind hampir tidak dapat dibedakan dari input Anda
2
Jika kecocokan terdekat memiliki jarak besar, pertimbangkan untuk memperluas Tailwind dengan warna kustom
3
Format nama kelas adalah "namaWarna-bayangan" (misalnya, bg-blue-500, text-red-600)
4
Warna 500-bayangan Tailwind adalah intensitas "standar" - lebih terang adalah 50-400, lebih gelap adalah 600-950
5
Anda dapat memperluas palet Tailwind dengan warna kustom di tailwind.config.js untuk kecocokan yang tepat

Related Tools

Konverter HEX ke RGB

Ubah kode warna HEX menjadi nilai RGB secara instan dengan pratinjau langsung.

🎨 Color Tools

Pemilih Warna

Pemilih warna interaktif dengan output HEX, RGB, HSL, dan CMYK.

🎨 Color Tools

Palet Warna Merek

Jelajahi palet warna resmi dari 50+ merek dan perusahaan teknologi populer.

🎨 Color Tools

Warna Desain Material

Jelajahi palet warna Desain Material yang lengkap dengan semua nuansa dan aksen.

🎨 Color Tools

Warna ke Variabel CSS

Ubah sekumpulan warna menjadi properti kustom CSS (variabel).

🎨 Color Tools

Frequently Asked Questions

Q Apa jika tidak ada warna Tailwind yang cukup dekat?

Jika kecocokan terdekat memiliki jarak tinggi, tambahkan warna Anda yang tepat ke konfigurasi Tailwind: theme.extend.colors di tailwind.config.js. Ini biasanya untuk warna merek.

Q Apakah ini berfungsi dengan Tailwind v4?

Palet default Tailwind telah konsisten di seluruh versi. Keluarga warna inti dan struktur bayangan tetap sama di Tailwind v3 dan v4.

Q Apa jarak yang dianggap sebagai kecocokan yang baik?

Di bawah 10 adalah sangat baik (perbedaan hampir tidak terlihat). 10-30 adalah baik (sedikit perbedaan). 30-50 adalah dapat diterima. Di atas 50 berarti Anda harus mempertimbangkan warna kustom.

About This Tool

Pencari Warna Tailwind is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.