Cara menggunakan Generator Warna Tailwind
- Masukkan warna brand kamu dalam format HEX, RGB, HSL, atau OKLCH.
- Beri nama palet (misalnya
brand) — nama ini akan menjadibg-brand-500dan sejenisnya. - Biarkan opsi “Langkah terdekat” aktif agar warna kamu jatuh di shade yang sesuai dengan tingkat kecerahannya, atau paksa ke 500.
- Pilih format ekspor, lalu salin ke konfigurasi Tailwind, CSS, atau SCSS kamu.
Apa itu skala warna 50–950?
Design system seperti Tailwind CSS menggambarkan setiap warna sebagai deretan shade: 50 adalah tint hampir putih untuk latar belakang, 500 adalah warna inti, dan 900–950 adalah shade gelap untuk teks dan dark mode. Dengan deretan lengkap, kamu bisa menata status hover dan active, border, badge, serta tema gelap secara konsisten — tanpa harus menebak-nebak versi yang lebih terang atau lebih gelap setiap kali.
Cara generator ini membangun skala
- Warna kamu dikonversi ke OKLCH, ruang warna yang seragam secara persepsi, sehingga setiap langkah menghasilkan lompatan visual yang merata.
- Setiap langkah memiliki target kecerahan yang dimodelkan dari palet Tailwind v4 (≈97% untuk 50 hingga ≈26% untuk 950). Warna kamu ditempatkan di langkah terdekat, dan target di sekitarnya sedikit bergeser agar deretan tetap mengalir melalui warna tersebut.
- Chroma (tingkat warna) mencapai puncak di sekitar 500–600 lalu menurun ke kedua ujung, seperti palet yang disetel manual, sehingga tint tidak terlihat neon dan shade tidak terlihat keruh.
- Shade apa pun yang berada di luar gamut sRGB akan dipetakan ulang dengan menurunkan chroma sambil mempertahankan hue dan kecerahan.
Menggunakan palet
Tailwind v4 membaca warna dari CSS: tempel blok @theme ke stylesheet utama kamu, lalu class seperti bg-brand-100 akan muncul. Tailwind v3 menggunakan theme.extend.colors di tailwind.config.js. Ekspor CSS variable dan SCSS bisa dipakai di proyek apa pun — termasuk Webflow, tempat kamu bisa membuat variabel warna yang sama di panel Variables.
Tips aksesibilitas
Sebagai patokan umum, teks di atas putih membutuhkan shade yang cukup gelap untuk mencapai 4,5:1 (sering kali 600 atau lebih gelap), dan teks di atas latar gelap biasanya cocok mulai dari 300 atau lebih terang. Petunjuk di bawah setiap swatch akan memberitahumu; untuk memastikan pasangan warna tertentu, cek dengan Contrast Checker atau APCA Contrast Checker.
Juga dicari sebagai: palet tailwind, generator shade warna, generator tint, skala warna, warna design system, palet warna brand, 50-900.
Tool yang cocok dipakai bersama Generator Warna Tailwind
- Pengambil Palet Warna Gambar — Temukan palet warna dari gambar apa pun, seperti foto, logo, screenshot, atau desain.
- Pencampur Warna — Pilih dua warna dan jumlah langkah untuk mendapatkan warna transisi yang tercampur merata, cocok untuk gradien, border, chart, dan state hover.
- CSS Variables ke Tailwind — Ubah variabel warna :root kamu menjadi theme Tailwind hanya dengan sekali tempel.
- Konverter OKLCH — Jelajahi ruang warna OKLCH yang seragam secara persepsi dengan slider langsung, cek apakah warna masuk ke sRGB, dan salin fallback HEX, RGB, dan HSL yang sesuai.