Bahasa IndonesiaID

Generator Skala Warna untuk Tailwind CSS – Shade 50–950

Pilih warna dasar dan nama, lalu Anda mendapatkan semua shade dari 50 sampai 950 beserta konfigurasi siap pakai.

Teks dan file Anda tetap di browser — tidak ada yang dikirim ke server.

Klik shade untuk menyalin nilai HEX-nya. Angkanya menunjukkan kontras warna teks yang paling mudah dibaca (putih atau hitam) di atas latar itu.

Tailwind v4 (@theme)
Tailwind v3 (tailwind.config.js)
Pratinjau
Tersimpan. Perubahan Anda sekarang aktif.
MulaiSelengkapnyaBaru

Cara pakai

  1. Pilih warna dasar atau ketik kode HEX, lalu isi nama yang akan dipakai di class, misalnya brand.
  2. Shade dari 50 (paling terang) sampai 950 (paling gelap) dibagi menurut kecerahan OKLCH. Jika "Pertahankan warna saya di shade terdekat" aktif, warna Anda muncul apa adanya di palet.
  3. Untuk v4, tempel blok @theme ke CSS Anda; untuk v3, bagian colors di tailwind.config.js. Setelah itu Anda bisa memakai class seperti bg-brand-500.
  4. Pratinjau menampilkan palet yang diterapkan pada tombol, badge, dan pesan peringatan.

Pertanyaan umum

Kenapa palet dihitung dalam OKLCH?

OKLCH didasarkan pada kecerahan yang dirasakan mata. Dengan begitu shade terlihat merata, dan warna seperti kuning dan biru tidak melompat kecerahannya. Warna bawaan Tailwind v4 juga didefinisikan dalam oklch().

Apakah hasilnya sama dengan warna bawaan Tailwind?

Tidak. Alat ini memakai kurva kecerahan dan saturasi (chroma) sendiri, jadi nilainya berbeda dari palet resmi. Gunanya untuk membuat skala serupa dengan cepat dari warna brand Anda sendiri.

Bagaimana dengan warna yang tidak bisa ditampilkan layar?

Kecerahan dan rona tetap dipertahankan, hanya saturasinya yang dikurangi sampai warna masuk ke sRGB. Karena itu warna yang sangat jenuh bisa tampak sedikit lebih lembut di beberapa shade.

Tailwind CSS adalah merek dagang milik Tailwind Labs Inc. Alat ini tidak berafiliasi dengan maupun didukung oleh Tailwind Labs.

Alat serupa

Color pickerHEX, RGB, HSL, dan CMYK sekaligusContrast checkerRasio kontras, level AA dan AAAGradien CSSGradien linear, radial, conicASCII art generatorTeks dan foto jadi karakter

Semua alat