Color Palette Generator
Generate a complete 10-shade color palette from any base color in Tailwind CSS style.
50#f0f6fergb(240, 246, 254)hsl(217, 91%, 97%)
100#dde9fdrgb(221, 233, 253)hsl(217, 91%, 93%)
200#b6d1fcrgb(182, 209, 252)hsl(217, 91%, 85%)
300#7bacf9rgb(123, 172, 249)hsl(217, 91%, 73%)
400#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
500#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
600#0b60eargb(11, 96, 234)hsl(217, 91%, 48%)
700#094cb9rgb(9, 76, 185)hsl(217, 91%, 38%)
800#063888rgb(6, 56, 136)hsl(217, 91%, 28%)
900#042458rgb(4, 36, 88)hsl(217, 91%, 18%)
Tentang alat ini
Ekstraktor Palet Warna menghasilkan skala 10 langkah untuk sistem desain dari warna dasar apa pun, sesuai dengan konvensi bayangan 50–900 yang digunakan oleh Tailwind CSS, Material Design, dan framework serupa.
Setiap swatch dalam skala yang dihasilkan menampilkan nilai hex, RGB, dan HSL. Warna teks pada setiap swatch secara otomatis menyesuaikan ke putih atau gelap berdasarkan luminans.
Cara penggunaan
- Pilih warna dasar menggunakan pemilih warna atau ketik nilai hex.
- Skala 10 langkah (50–900) dibuat secara instan, mencakup seluruh rentang kecerahan.
- Gunakan nilai hex, RGB, atau HSL untuk menerapkan warna dalam sistem desain atau variabel CSS.
Kasus penggunaan
Tim sistem desain menghasilkan skala warna lengkap sebagai ekstensi konfigurasi Tailwind atau properti CSS kustom. Developer frontend membangun komponen UI yang dapat diakses.
Pertanyaan umum
- Apa bedanya skala ini dengan "nuansa" di alat lain? — Alat ini menghasilkan skala tetap 10 langkah (50, 100, 200, … 900) yang berlabuh pada nilai kecerahan tertentu, sesuai konvensi sistem desain umum.
- Apakah mengubah saturasi memengaruhi skala? — Saturasi warna dasar dipertahankan di semua langkah — hanya kecerahan yang berubah.
- Bisakah saya menggunakan warna ini langsung di Tailwind CSS? — Ya. Salin nilai hex dari setiap tingkat bayangan dan tambahkan ke tailwind.config.js di bawah theme.extend.colors dengan nomor bayangan sebagai kunci.