Generator Gradasi Warna

Apa itu Generator Gradasi Warna?

Generator Gradasi Warna adalah alat online gratis yang mengubah satu warna HEX dasar menjadi skala tint-dan-shade yang lengkap, dinomori dari 50, 100, 200 hingga 900 dan 950, persis seperti token warna Tailwind CSS. Alat ini membangun ramp dengan mencampur warna dasar Anda secara linear ke arah putih untuk langkah yang lebih terang (50-400) dan ke arah hitam untuk langkah yang lebih gelap (600-950), dengan tetap menjaga 500 sebagai warna dasar itu sendiri. Desainer dan pengembang front-end menggunakannya untuk menghasilkan skala warna yang konsisten bagi sebuah design system, menyiapkan custom property CSS atau warna tema Tailwind, dan memilih varian terang/gelap dari warna merek yang aksesibel. Setiap langkah ditampilkan sebagai sampel di samping nilai HEX-nya beserta tombol salin satu klik.

Cara menggunakan Generator Gradasi Warna

1. Ketik warna dasar di kolom Warna dasar (HEX) dengan format #rrggbb atau #rgb, atau klik sampel pemilih warna besar untuk memilihnya secara visual.
2. Skala 50-950 diperbarui seketika: tint terang (50-400) dicampur ke arah putih, 500 adalah warna dasar Anda, dan shade gelap (600-950) dicampur ke arah hitam.
3. Baca setiap baris untuk melihat nomor langkah (50 … 950), sampel warnanya, dan nilai HEX-nya secara berdampingan.
4. Klik tombol salin di ujung baris mana pun untuk menyalin nilai HEX langkah tersebut ke papan klip Anda.
5. Salin HEX warna dasar dengan tombol salin di sebelah kolom input setiap kali Anda hanya membutuhkan langkah 500.

Contoh

#4f86f7

#f6f9ff

#4f86f7

#0b1323

Pertanyaan yang sering diajukan

Format warna apa saja yang bisa saya masukkan?

Warna dasar dimasukkan sebagai nilai HEX dalam format #rrggbb (enam digit) atau bentuk singkat #rgb (tiga digit). Jika nilainya bukan warna HEX yang valid, pesan 'Invalid HEX color' muncul dan tidak ada skala yang dihasilkan. Setiap langkah pada hasil ditampilkan sebagai nilai HEX #rrggbb.

Bagaimana gradasi dihitung?

Setiap langkah adalah campuran linear antara warna dasar Anda dengan putih murni atau hitam murni. Langkah 50-400 dicampur ke arah putih dengan proporsi yang menurun, langkah 500 adalah warna dasar tanpa perubahan, dan langkah 600-950 dicampur ke arah hitam dengan proporsi yang meningkat. Penomorannya cocok dengan skala warna Tailwind CSS.

Mengapa langkah 500 terkadang tidak persis sesuai nomor warna dasar saya?

Langkah 500 selalu persis warna dasar Anda. Alat ini tidak memusatkan ulang warna Anda pada kurva kecerahan perseptual, jadi jika input Anda sangat terang atau sangat gelap, separuh skala yang lebih terang atau lebih gelap akan memiliki rentang yang lebih sedikit — pilih warna dasar bernada tengah untuk ramp yang paling merata.

Bisakah saya memilih warna secara visual alih-alih mengetik HEX?

Bisa. Klik sampel besar dengan pemilih warna bawaan untuk memilih warna; kolom HEX diperbarui secara otomatis dan seluruh skala 50-950 dihitung ulang seketika saat Anda mengubahnya.

Apakah data warna saya diunggah ke mana pun?

Tidak. Semuanya berjalan sepenuhnya di browser Anda menggunakan perhitungan warna lokal — tidak ada nilai warna yang pernah dikirim ke server, jadi alat ini bekerja offline dan menjaga palet Anda tetap pribadi.