Warna Tailwind CSS - Referensi Palet Warna Lengkap

Referensi Palet Warna Tailwind CSS

Semua warna Tailwind ada di sini dalam satu grid yang bisa dicari — seluruh 242 nilai dari 22 keluarga warna, masing-masing dengan 11 tingkatan dari 50 (paling terang) sampai 950 (paling gelap). Klik kotak warna mana pun untuk langsung menyalin nama class atau nilai warnanya, tanpa harus bolak-balik ke dokumentasi.

Palet ini terbagi menjadi 5 keluarga netral (Slate, Gray, Zinc, Neutral, Stone) untuk teks, latar, dan garis tepi, ditambah 17 keluarga berwarna dari Red sampai Rose untuk aksen dan tema. Dirancang untuk developer front-end dan desainer yang ingin cara cepat menelusuri, mencari kode HEX, dan mengambil nilai persis yang dibutuhkan.

Privat sejak awal: seluruh palet sudah disertakan di dalam aplikasi dan berjalan di browser Anda. Tidak ada apa pun yang diunggah ke server, dan favorit Anda hanya disimpan di local storage browser Anda sendiri.

Cara Memakai

Telusuri grid

Setiap baris menampilkan nama keluarga di sebelah kiri dan 11 tingkatannya, dari paling terang (50) ke paling gelap (950). Arahkan kursor ke kotak warna mana pun untuk melihat nomor tingkatan dan nilai HEX-nya.

Cari dan saring

Ketik nama keluarga seperti blue atau nilai HEX seperti #3b82f6 untuk menyaring sambil mengetik. Gunakan dropdown filter untuk menampilkan Semua Warna, Warna Berwarna, atau Warna Netral saja.

Pilih format dan salin

Pilih Nama Class, HEX, RGB, atau HSL dari dropdown format, lalu klik kotak warna mana pun untuk menyalin nilai itu ke clipboard Anda.

Buka tampilan detail

Klik dua kali sebuah kotak warna untuk membuka modal detail. Lihat nama class, HEX, RGB, dan HSL sekaligus, salin salah satunya, dan lompat ke tingkatan lain dalam keluarga yang sama.

Simpan dan ekspor favorit

Klik bintang pada kotak warna mana pun untuk menambahkannya ke favorit. Buka panel favorit dan gunakan Ekspor CSS untuk menyalin setiap favorit sebagai sekumpulan CSS custom property yang siap ditempel ke stylesheet Anda.

Fitur

Palet Warna Lengkap

Seluruh 242 warna Tailwind dalam satu grid — 22 keluarga dengan 11 tingkatan masing-masing — ditata agar Anda bisa membandingkan tingkatan dalam satu keluarga sekilas pandang.

Beberapa Format Salin

Salin warna sebagai Nama Class (bg-blue-500), HEX, RGB, atau HSL — pilih formatnya dari dropdown lalu klik untuk menyalin.

Sistem Favorit

Bintangi warna yang paling sering Anda pakai. Favorit disimpan di local storage browser Anda, jadi tetap ada di antar-sesi pada perangkat yang sama.

Ekspor sebagai CSS Variable

Ubah favorit Anda menjadi CSS custom property dengan satu klik, siap dimasukkan ke blok :root untuk palet proyek kustom.

Modal Detail Warna

Klik dua kali warna mana pun untuk gambaran utuhnya: nama class, HEX, RGB, dan HSL bersamaan, plus tautan cepat ke setiap tingkatan lain dalam keluarga itu.

Pencarian Cerdas

Temukan warna seketika berdasarkan nama keluarga atau nilai HEX. Grid tersaring secara real-time sambil Anda mengetik, dan filter kategori mempersempitnya ke warna netral atau warna berwarna.

Data Anda Tetap Privat

Palet sudah disertakan di dalam aplikasi dan berjalan sepenuhnya di browser Anda. Tidak ada permintaan ke server, favorit disimpan secara lokal, dan bekerja offline setelah pemuatan pertama.

Pertanyaan yang Sering Diajukan

Ada berapa warna dan tingkatan di Tailwind?

Alat ini mencakup 22 keluarga warna, masing-masing dengan 11 tingkatan dari 50 (paling terang) sampai 950 (paling gelap) — total 242 warna. Lima keluarga adalah warna netral (Slate, Gray, Zinc, Neutral, Stone) dan 17 lainnya berwarna, dari Red sampai Rose.

Apa kode HEX dari bg-blue-500?

bg-blue-500 adalah #3b82f6. Untuk menemukan HEX warna lain, cari nama keluarganya atau arahkan kursor ke kotak warnanya — nomor tingkatan dan nilai HEX ditampilkan langsung di atasnya, dan modal detail mencantumkan HEX, RGB, serta HSL bersamaan.

Bagaimana cara menyalin HEX atau RGB warna Tailwind?

Atur dropdown format ke HEX atau RGB, lalu klik kotak warna mana pun untuk menyalin nilai itu. Anda juga bisa klik dua kali sebuah kotak warna untuk membuka modal detail dan menyalin nama class, HEX, RGB, atau HSL secara terpisah.

Bagaimana cara memakai class warna seperti bg-, text-, atau border-?

Format class menyalin class latar seperti bg-blue-500, siap dimasukkan ke HTML Anda dengan Tailwind CSS. Untuk warna teks, ganti awalannya menjadi text-blue-500, dan untuk garis tepi pakai border-blue-500 — keluarga dan tingkatannya tetap sama.

Apa beda di antara warna-warna netral?

Tailwind menyediakan lima keluarga netral dengan rona halus: Slate adalah abu-abu sejuk yang condong ke biru, Gray adalah netral seimbang, Zinc sejuk tapi sedikit lebih hangat dari Slate, Neutral sama sekali tanpa kecondongan warna, dan Stone adalah abu-abu hangat dengan sedikit nuansa cokelat.

Bisakah saya memakai warna-warna ini tanpa Tailwind CSS?

Bisa. Salin nilai HEX, RGB, atau HSL dan pakai di file CSS, alat desain, atau aplikasi mana pun — warnanya bekerja sendiri tanpa framework Tailwind.

Apakah favorit saya tersimpan, dan bagaimana cara mengekspornya?

Favorit disimpan di local storage browser Anda, jadi tetap ada di antar-sesi pada perangkat dan browser yang sama; menghapus data browser akan menghilangkannya. Buka panel favorit dan klik Ekspor CSS untuk menyalin setiap favorit sebagai CSS custom property yang bisa Anda tempel ke stylesheet.