Go Toolstack

Palet Warna Tailwind CSS

Jelajahi, cari, dan salin kode warna resmi palet Tailwind CSS (50–950).

Palet Warna Tailwind CSS

Jelajahi, cari, dan salin kode warna resmi palet Tailwind CSS (50–950).

Cara Kerja

1
Tentukan Kriteria & Opsi
Pilih panjang, format, atau parameter pembuatan data yang Anda inginkan.
2
Hasilkan Seketika
Buat data yang aman, acak, atau khusus sepenuhnya di dalam peramban Anda.
3
Salin atau Ekspor
Salin output yang dibuat ke papan klip atau unduh sebagai file.

Temukan utilitas sisi klien lainnya dalam kategori ini.

Pusat Gambar & Desain • Alur Kerja & Panduan Perbandingan

Jelajahi semua alat gambar & desain, batasan teknis peramban, dan panduan pemilihan alat.

Jelajahi Pusat →
Pemformat & Validator JSON

Format, validasi, dan rapikan kode JSON seketika di peramban Anda.
Enkoder & Dekoder Base64

Enkode dan dekode teks atau string biner ke format Base64 secara instan.
Pemformat Kueri SQL

Rapikan dan susun kueri SQL kompleks dengan indentasi profesional seketika.

Panduan Blog Terkait

Panduan teknis, pemecahan masalah, dan praktik terbaik

Pusat Konsep & Pengetahuan

Panduan Palet Warna Tailwind CSS: Rentang 50–950, Ruang Warna OKLCH & HEX

Tailwind CSS menyediakan sistem token warna kurasi profesional yang dirancang dengan proporsi kecerahan dan saturasi optik seimbang. Setiap rumpun warna (Slate, Gray, Zinc, Red, Blue, Emerald, Violet, dll.) dibagi menjadi sebelas tingkat kecerahan: dari corak paling terang 50 untuk latar belakang halus, corak sedang 500 untuk tombol tindakan utama, hingga corak tergelap 950 untuk latar belakang tema malam yang pekat.

Katalog interaktif ini memungkinkan desainer dan pengembang web memindai seluruh keluarga warna Tailwind secara simultan. Dalam skenario praktis, pengembang ingin mencocokkan warna tombol biru antarmuka web (bg-blue-600) ke dalam dokumen desain eksternal atau lembar gaya CSS biasa yang membutuhkan format RGB atau HEX. Cukup ketik nama warna atau klik kartu warna, nilai heksadesimal #2563eb dan komponen RGB-nya langsung tersalin ke papan klip peramban.

Seluruh data palet warna dan fungsi pencarian berjalan 100% lokal di memori peramban Anda secara instan.

Arsitektur Inti & Rumus Matematis

Tingkat Kecerahan: 50 (Sangat Terang) ➔ 500 (Kecerahan Sedang Seimbang) ➔ 950 (Sangat Gelap Pekat)

Sistem warna Tailwind v3/v4 memetakan ruang warna optik terkalibrasi untuk memastikan tingkat kontras WCAG yang konsisten di seluruh spektrum rona warna.

Praktik Terbaik & Panduan Penting

  • Gunakan Corak 500–600 untuk Elemen Tindakan Utama: Warna 500 dan 600 memberikan keterbacaan teks putih terbaik yang memenuhi rasio kontras 4.5:1.
  • Gunakan Corak 50 dan 100 untuk Latar Belakang Kartu: Hindari putih pekat (#fff) pada kartu untuk menciptakan kedalaman visual bertingkat yang nyaman di mata.
  • Manfaatkan Corak 900 dan 950 untuk Tema Gelap: Corak 950 memberikan warna latar belakang malam yang lebih kaya dan tidak kusam dibandingkan hitam pekat #000.
  • Gunakan Format Salin Sesuai Kebutuhan: Salin nama kelas utilitas untuk berkas HTML Tailwind atau salin nilai HEX untuk berkas konfigurasi Figma/CSS.

Pertanyaan yang Sering Diajukan (FAQ)

Apakah palet ini mencakup semua warna resmi Tailwind CSS v3 dan v4?
Ya. Katalog mencakup seluruh 22 rumpun warna standar resmi Tailwind (dari Slate hingga Rose) dengan rentang lengkap 50 sampai 950.
Bagaimana cara menyalin format warna selain HEX (seperti RGB atau nama kelas)?
Gunakan menu pilihan format di bagian atas alat untuk memilih mode salin default: Nama Kelas, HEX, RGB, atau HSL.
Apakah pencarian warna mendukung pencarian berdasarkan kode HEX?
Ya. Anda dapat mengetik kode warna heksadesimal sebagian (misal: #3b82) dan alat akan menyaring warna Tailwind terdekat.
Apakah alat ini memerlukan koneksi internet untuk memuat warna?
Tidak. Seluruh matriks warna tertanam secara lokal di berkas skrip dan dapat diakses secara luring.