Apa itu Warna Tailwind CSS?

Warna Tailwind CSS adalah alat referensi komprehensif yang menyediakan akses instan ke palet warna lengkap Tailwind CSS. Jelajahi, cari, dan salin dari 242 warna yang dirancang dengan cermat di 22 keluarga warna, masing-masing menampilkan 11 shade mulai dari 50 (paling terang) hingga 950 (paling gelap).

Warna Netral (5)

Slate, Gray, Zinc, Neutral, dan Stone - sempurna untuk teks, latar belakang, dan border dengan variasi halus dalam kehangatan dan tone.

Warna Berwarna (17)

Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, dan Rose untuk elemen UI yang vibrant.

Akses Cepat: Tidak perlu lagi beralih ke dokumentasi. Salin nilai warna apa pun - baik nama class seperti bg-blue-500 atau nilai HEX mentah seperti #3b82f6 - hanya dengan satu klik.

Cara Menggunakan

Jelajahi Warna

Grid warna menampilkan semua 22 keluarga warna dalam tata letak yang terorganisir. Setiap baris menampilkan nama keluarga di sebelah kiri dan 11 shade-nya dari paling terang (50) hingga paling gelap (950). Cukup arahkan kursor ke warna mana pun untuk melihat nomor shade dan nilai HEX-nya secara instan.

Cari Warna

Gunakan kotak pencarian untuk menemukan warna dengan cepat berdasarkan:

Nama keluarga: Ketik "blue", "slate", atau "emerald"
Nilai HEX: Masukkan "#3b82f6" atau hanya "3b82f6"

Hasil akan difilter secara real-time saat Anda mengetik.

Filter berdasarkan Kategori

Gunakan dropdown filter untuk mempersempit tampilan Anda:

Semua Warna: Palet lengkap (22 keluarga)
Warna Berwarna: Hanya warna kromatik (17 keluarga)
Netral: Varian grayscale (5 keluarga)

Salin Warna

Pilih format yang Anda inginkan dari dropdown, lalu klik warna apa pun untuk menyalin secara instan:

Format	Contoh	Terbaik Untuk
Nama Class	`bg-blue-500`	HTML/JSX Tailwind
HEX	`#3b82f6`	CSS, Tool Desain
RGB	`rgb(59, 130, 246)`	CSS rgba(), JavaScript
HSL	`hsl(217, 91%, 60%)`	Manipulasi Warna

Lihat Detail Warna

Klik dua kali pada warna apa pun untuk membuka modal detail. Di sini Anda dapat melihat semua nilai format sekaligus, menyalin nilai individual dengan tombol khusus, dan menavigasi ke shade terkait dalam keluarga warna yang sama.

Fitur

Palet Warna Lengkap

Akses semua 242 warna dari palet resmi Tailwind CSS. Tata letak grid memudahkan untuk membandingkan shade dalam satu keluarga dan menemukan warna yang sempurna untuk proyek Anda.

22 keluarga warna
11 shade per keluarga
Perbandingan visual yang mudah

Berbagai Format Salin

Salin warna dalam format yang tepat sesuai kebutuhan alur kerja Anda:

Nama Class: Siap untuk HTML (bg-blue-500)
HEX: Untuk CSS dan tool desain
RGB: Untuk fungsi rgba()
HSL: Untuk manipulasi warna

Sistem Favorit

Simpan warna yang sering digunakan ke daftar favorit Anda. Klik ikon bintang pada warna apa pun untuk menambahkannya. Favorit Anda disimpan secara lokal dan tetap ada di seluruh sesi.

Favorit dengan satu klik
Penyimpanan persisten
Panel akses cepat

Ekspor sebagai Variabel CSS

Ekspor semua warna favorit Anda sebagai custom property CSS dengan satu klik. Sempurna untuk membuat palet warna kustom untuk proyek Anda yang siap digunakan dalam stylesheet.

Ekspor CSS dengan satu klik
Format custom property
Kode siap pakai untuk proyek

Klik dua kali pada warna apa pun untuk melihat informasi komprehensif termasuk semua nilai format dan akses cepat ke shade terkait dalam keluarga yang sama.

Semua format sekaligus
Tombol salin individual
Navigasi shade terkait

Pencarian Cerdas

Temukan warna secara instan dengan mengetik nama keluarga atau nilai HEX. Pencarian memfilter grid secara real-time saat Anda mengetik, membuat penemuan warna cepat dan intuitif.

Filtering real-time
Pencarian nama keluarga
Pencarian nilai HEX

Data Anda Tetap Privat: Semua pemrosesan terjadi di browser Anda. Tidak ada permintaan server untuk data warna, favorit disimpan secara lokal menggunakan localStorage browser, dan bekerja sepenuhnya offline setelah pemuatan awal.

Pertanyaan yang Sering Diajukan

Versi warna Tailwind CSS apa yang digunakan alat ini?

Alat ini menggunakan palet warna resmi Tailwind CSS v4, yang mencakup semua 22 keluarga warna dengan 11 shade masing-masing (50 hingga 950). Ini memastikan Anda bekerja dengan nilai warna paling terkini dan akurat dari framework Tailwind.

Apa perbedaan antara warna netral?

Tailwind menyediakan 5 keluarga warna netral dengan perbedaan halus namun penting dalam tone dan kehangatan:

Slate: Abu-abu dingin dengan sedikit nuansa biru - modern dan tajam
Gray: Abu-abu netral murni - seimbang dan serbaguna
Zinc: Abu-abu dingin, sedikit lebih hangat dari Slate - nuansa kontemporer
Neutral: Netral sejati tanpa warna dasar - sempurna seimbang
Stone: Abu-abu hangat dengan sedikit nuansa cokelat - organik dan natural

Pilih berdasarkan temperatur dan estetika keseluruhan desain Anda. Abu-abu dingin (Slate, Zinc) cocok dengan warna biru dan desain modern, sementara abu-abu hangat (Stone) melengkapi tone natural.

Bagaimana cara menggunakan nama class yang disalin?

Format nama class (misalnya, bg-blue-500) siap digunakan langsung di HTML Anda dengan Tailwind CSS. Cukup tambahkan ke atribut class elemen Anda:

Contoh HTML

<div class="bg-blue-500 text-white p-4">
  Hello World
</div>

Prefix umum:

bg- untuk warna latar belakang
text- untuk warna teks
border- untuk warna border
ring- untuk warna ring

Bisakah saya menggunakan warna ini tanpa Tailwind CSS?

Tentu saja! Salin nilai HEX, RGB, atau HSL untuk digunakan di file CSS mana pun, tool desain, atau aplikasi. Warna-warna ini bekerja secara independen dari framework Tailwind.

Contoh CSS

.my-button {
  background-color: #3b82f6;
  color: #ffffff;
  border: 2px solid rgb(59, 130, 246);
}

Warna-warna ini juga sempurna untuk tool desain seperti Figma, Adobe XD, Sketch, atau aplikasi apa pun yang menerima format warna standar.

Apakah favorit saya tersimpan?

Ya! Favorit disimpan di localStorage browser Anda. Mereka akan tetap ada di seluruh sesi pada perangkat dan browser yang sama, sehingga Anda dapat menutup tab dan kembali lagi nanti untuk menemukan favorit Anda tetap utuh.

Penting: Menghapus data browser atau menggunakan mode private/incognito akan menghapus favorit yang tersimpan. Pertimbangkan untuk mengekspor favorit Anda sebagai variabel CSS untuk cadangan.

Bagaimana cara mengekspor palet warna saya?

Mengekspor palet warna kustom Anda sangat mudah:

Tambahkan warna ke favorit Anda dengan mengklik ikon bintang
Buka panel favorit
Klik tombol "Ekspor CSS"
Tempelkan custom property CSS yang disalin ke stylesheet Anda

Contoh CSS yang Diekspor

:root {
  --color-blue-500: #3b82f6;
  --color-emerald-600: #059669;
  --color-slate-700: #334155;
}

Anda kemudian dapat menggunakan variabel ini di seluruh CSS Anda: background-color: var(--color-blue-500);