Generator Gradasi Warna: Terang, Gelap & Redup
Generator Gradasi Warna mengubah warna dasar apa pun menjadi satu set lengkap variasi yang lebih terang, lebih gelap, dan lebih redup. Pilih sebuah warna, dan alat ini langsung membangun tiga gradasi — warna terang, warna gelap, dan warna redup — yang bisa Anda salin atau ekspor langsung ke proyek Anda.
Alat ini dibuat untuk desainer dan developer yang membutuhkan tingkatan warna yang konsisten untuk sebuah design system: state hover dan aktif, garis tepi, latar belakang, hingga gradasi mode gelap semuanya berawal dari satu warna sumber. Atur berapa banyak tingkatan yang Anda inginkan dan seberapa besar tiap lompatannya, lalu ambil nilainya sebagai CSS, SCSS, Tailwind, atau JSON.
Cara Membuat Gradasi Warna
Pilih warna dasar Anda
Klik kotak warna untuk membuka pemilih warna, ketik kode HEX pada kolom input (lengkap #3B82F6 atau singkat #F00), atau tekan Warna Acak untuk titik awal yang baru.
Atur tingkatan dan selisih
Pilih berapa banyak variasi yang dibuat dengan Tingkatan (5, 10, 15, atau 20) dan seberapa besar tiap lompatan dengan Selisih (5%, 10%, atau 20%). Warna terang, gelap, dan redup ikut berubah secara langsung.
Salin satu warna
Klik kotak warna mana pun untuk menyalin kode HEX-nya ke clipboard. Tiap kotak juga menampilkan persentase campuran sehingga Anda tahu persis seberapa terang, gelap, atau redup warnanya.
Ekspor seluruh palet
Buka menu Salin Semua dan pilih Variabel CSS, Variabel SCSS, Konfigurasi Tailwind, atau JSON. Seluruh palet disalin ke clipboard, siap ditempel ke kode Anda.
Fitur
Tiga Jenis Variasi Warna
Buat warna terang (dicampur putih agar lebih cerah), warna gelap (dicampur hitam agar lebih pekat), dan warna redup (dicampur abu-abu agar lebih kalem) dari satu warna dasar.
Kontrol yang Fleksibel
Pilih 5, 10, 15, atau 20 tingkatan per gradasi dan atur lompatan intensitas ke 5%, 10%, atau 20% agar gradasi sesuai dengan design system Anda.
Beberapa Cara Input
Gunakan pemilih warna visual, ketik kode HEX langsung (singkatan seperti #F00 otomatis dilengkapi), atau buat warna acak dengan satu klik.
Pratinjau Langsung
Setiap gradasi tergambar ulang seketika saat Anda mengubah warna dasar, tingkatan, atau selisih, jadi Anda bisa menyetel hasil tanpa menunggu.
Pilihan Ekspor
Salin seluruh palet sebagai custom property CSS, variabel SCSS, konfigurasi warna Tailwind, atau JSON terstruktur untuk alur kerja apa pun.
Salin Sekali Klik
Klik kotak warna mana pun untuk menyalin kode HEX-nya sendiri, atau gunakan Salin Semua untuk mengambil seluruh palet sekaligus.
URL yang Bisa Dibagikan
Tautan halaman ikut diperbarui dengan warna, tingkatan, dan selisih Anda, sehingga siapa pun yang Anda kirimi membuka palet yang persis sama.
Berjalan di Peramban Anda
Semua perhitungan warna terjadi di perangkat Anda. Tidak ada yang diunggah, jadi alat ini bekerja seketika dan menjaga pilihan Anda tetap privat.
Pertanyaan yang Sering Diajukan
Apa perbedaan antara tint, shade, dan tone?
Sebuah tint menambahkan putih pada warna agar lebih terang, sebuah shade menambahkan hitam agar lebih gelap, dan sebuah tone menambahkan abu-abu agar lebih redup tanpa banyak mengubah tingkat terangnya. Alat ini membangun ketiga gradasi tersebut dari warna dasar Anda sekaligus.
Bagaimana cara membuat warna gelap dari satu warna?
Pilih warna dasar dengan pemilih warna, kode HEX, atau tombol acak. Gradasi warna gelap langsung muncul di bawah warna dasar dan makin lama makin pekat. Atur Tingkatan dan Selisih untuk mengatur berapa banyak variasi gelap yang dihasilkan dan seberapa jauh jaraknya.
Bagaimana Tingkatan dan Selisih bekerja bersama?
Tingkatan menentukan berapa banyak kotak warna yang dibuat dan Selisih menentukan jarak persentase di antaranya. Dengan 10 tingkatan dan selisih 10% Anda mendapat nilai pada 10%, 20%, 30%, dan seterusnya hingga 100%. Karena pencampuran berhenti di 100%, selisih 20% membatasi tiap gradasi menjadi 5 kotak (20%, 40%, 60%, 80%, 100%).
Bisakah saya mengekspor gradasi sebagai variabel CSS, SCSS, atau Tailwind?
Bisa. Buka menu Salin Semua dan pilih Variabel CSS, Variabel SCSS, Konfigurasi Tailwind, atau JSON. Seluruh palet disalin ke clipboard, siap ditempel ke stylesheet, file Sass, tema Tailwind, atau pengaturan berbasis data apa pun.
Format warna apa saja yang bisa saya masukkan?
Anda menentukan warna dasar dengan pemilih warna visual atau dengan mengetik kode HEX. Baik kode 6 digit lengkap seperti #3B82F6 maupun singkatan 3 digit seperti #F00 bisa dipakai — singkatan dilengkapi secara otomatis (misalnya #F00 menjadi #FF0000). Kotak warna yang dihasilkan juga diberikan sebagai nilai HEX.
Bagaimana cara membagikan palet saya?
Salin tautan dari bilah alamat peramban Anda. Tautan itu membawa warna dasar, jumlah tingkatan, dan selisih Anda, sehingga membukanya akan menciptakan ulang set warna terang, gelap, dan redup yang persis sama.
Apakah data saya disimpan di suatu tempat?
Tidak. Setiap perhitungan berjalan di peramban Anda, tidak ada yang dikirim ke server, dan pilihan warna Anda tidak disimpan atau dilacak.
Belum ada komentar. Jadilah yang pertama berkomentar!