CodeKitHubApa Itu Alat Ini?
Gradasi warna adalah serangkaian variasi satu warna pada tingkat kecerahan yang berbeda, digunakan di seluruh desain UI untuk hal-hal seperti status hover, status nonaktif, border, dan latar belakang yang perlu berhubungan dengan warna merek tanpa harus identik.
Alat ini mengonversi warna dasar Anda ke HSL, menjaga hue dan saturasi tetap, dan mengubah kecerahan dari sekitar 95% (tint mendekati putih) hingga sekitar 10% (shade mendekati hitam), dengan warna asli Anda ditempatkan pada posisi alaminya di tengah gradasi.
Mengapa Menggunakannya?
- Menghasilkan gradasi bergaya sistem desain (seperti skala 50/100/200.../900 milik Tailwind) dari satu warna mana pun, bukan hanya palet preset tetap.
- Pilih 7, 9, atau 11 langkah tergantung seberapa detail gradasi yang Anda butuhkan.
- Setiap langkah menampilkan kode HEX dan persentase kecerahan yang tepat — klik untuk menyalin.
- Menjaga hue dan saturasi tetap konstan di seluruh gradasi, sehingga semua shade terlihat jelas berhubungan dengan warna dasar alih-alih bergeser ke abu-abu.
- Gratis, instan, dan sepenuhnya lokal.
Cara Menggunakan
- Pilih warna dasar Anda menggunakan color picker atau dengan mengetikkan kode HEX.
- Pilih berapa banyak langkah yang Anda inginkan dalam gradasi (7, 9, atau 11).
- Baca kode HEX dan persentase kecerahan setiap shade langsung pada swatch-nya.
- Klik swatch mana pun untuk menyalin kode HEX-nya.
Contoh
Input
#3B82F6 (biru sedang), 9 langkahOutput
9 shade dari tint mendekati putih (~95% kecerahan) hingga shade mendekati hitam (~10% kecerahan), dengan #3B82F6 sendiri diposisikan sebagai langkah tengahHue dan saturasi tetap konstan di semua 9 langkah — hanya kecerahan yang berubah — sehingga setiap shade terlihat jelas sebagai bagian dari keluarga warna yang sama.
Pertanyaan yang Sering Diajukan
Apakah ini sistem yang sama dengan yang digunakan Tailwind CSS untuk skala warnanya?
Ini ide dasar yang sama (hue/saturasi tetap, kecerahan bervariasi) tetapi bukan replika persis dari palet spesifik Tailwind — skala 50-900 Tailwind disetel manual oleh desainer, bukan dihasilkan oleh satu formula. Alat ini memberi Anda struktur yang sebanding yang dihasilkan dari warna apa pun yang Anda pilih, yang berguna saat warna dasar Anda bukan salah satu preset Tailwind.
Mengapa warna saya terlihat hampir sama di dua langkah yang berdekatan?
Itu bisa terjadi di dekat ujung gradasi yang sangat terang atau sangat gelap, di mana kecerahan yang dirasakan berubah lebih lambat daripada yang disarankan persentase numerik (sifat yang diketahui dari persepsi warna manusia, bukan spesifik untuk alat ini). Memilih lebih sedikit langkah (7 alih-alih 11) menyebarkan nilai kecerahan lebih jauh dan mengurangi swatch yang hampir duplikat.
Bisakah saya menggunakan shade ini langsung sebagai custom property CSS?
Ya — salin setiap kode HEX dan tempelkan ke variabel CSS Anda (misalnya --color-brand-100 hingga --color-brand-900), sesuaikan posisi gradasi dengan skala penamaan apa pun yang digunakan proyek Anda.
Haruskah saya menggunakan ini atau Color Mixer?
Jika Anda membuat versi lebih terang dan lebih gelap dari satu warna — status hover, latar belakang halus, border yang berhubungan dengan warna merek — gunakan generator shade ini. Jika sebaliknya Anda memerlukan warna di antara dua warna berbeda (misalnya, langkah antara biru utama dan oranye sekunder Anda), gunakan Color Mixer, yang menginterpolasi channel RGB dua warna pada rasio berapa pun alih-alih memvariasikan kecerahan satu warna.
Apa yang terjadi jika warna dasar saya sudah sangat terang atau sangat gelap?
Warna dasar selalu berada di baris tengah, dengan tint naik hingga sekitar 95% kecerahan di atasnya dan shade turun hingga sekitar 10% di bawahnya. Jika warna dasar Anda sudah mendekati putih, setengah bagian tint dari gradasi terkompresi menjadi rentang kecerahan yang sempit (baris hampir duplikat) sementara setengah bagian shade menyebar luas — dan sebaliknya untuk warna dasar yang sangat gelap. Untuk gradasi yang paling merata, mulailah dari versi warna Anda dengan kecerahan menengah (sekitar 40-60% kecerahan).
Bisakah alat ini juga menghasilkan tone (warna yang dicampur dengan abu-abu)?
Tidak — alat ini hanya memvariasikan kecerahan sambil menjaga saturasi tetap, yang menghasilkan tint dan shade tetapi bukan tone. Jika Anda menginginkan gradasi yang lebih redup, kurangi saturasi warna dasar Anda terlebih dahulu (pilih versi yang lebih abu-abu di color picker) dan hasilkan gradasi dari sana; setiap langkah akan mewarisi saturasi yang lebih rendah.