Apa itu Generator Gradasi Warna?

Generator Gradasi Warna membantu Anda membuat variasi warna lengkap dari warna dasar apa pun. Tool ini menghasilkan tiga jenis modifikasi warna yang penting untuk membangun design system dan user interface yang kohesif.

Tints

Versi lebih terang dari warna Anda yang dibuat dengan mencampur putih. Sempurna untuk background dan elemen UI yang halus.

Shades

Versi lebih gelap dari warna Anda yang dibuat dengan mencampur hitam. Ideal untuk teks, border, dan penekanan.

Tones

Versi lebih redup dari warna Anda yang dibuat dengan mencampur abu-abu. Bagus untuk elemen UI yang sophisticated dan halus.

Mengapa Menggunakan Variasi Warna?

Skala warna yang konsisten adalah fondasi dari design system modern. Skala warna memungkinkan desainer dan developer membuat interface yang harmonis dan accessible dengan mudah.

State Interaktif

Buat state hover, active, focus, dan disabled untuk tombol, link, dan komponen UI dengan progresi warna yang konsisten.

Aksesibilitas

Bangun kombinasi warna yang accessible dengan rasio kontras yang tepat sesuai pedoman WCAG untuk teks dan elemen interaktif.

Konsistensi Visual

Pertahankan bahasa visual yang kohesif di seluruh proyek Anda dengan skala warna yang dihasilkan secara sistematis.

Dukungan Dark Mode

Hasilkan palet warna dark mode dari warna brand yang ada, memastikan pergantian tema yang mulus.

Data Anda Tetap Privat

100% Pemrosesan di Sisi Klien: Semua kalkulasi warna terjadi langsung di browser Anda. Tidak ada pemrosesan server, tidak ada pengumpulan data, tidak ada pelacakan pilihan warna Anda. Karya kreatif Anda tetap sepenuhnya privat.

Cara Menggunakan Generator Gradasi Warna

Ikuti langkah-langkah sederhana ini untuk menghasilkan palet warna profesional dalam hitungan detik:

Pilih Warna Dasar Anda

Pilih warna awal Anda menggunakan salah satu metode input fleksibel ini:

Color Picker - Klik kotak warna untuk membuka picker visual dengan kontrol yang intuitif
Input HEX - Ketik kode HEX secara langsung (misalnya, #3B82F6 atau 3B82F6 tanpa tanda pagar)
Tombol Random - Klik untuk menghasilkan warna acak sebagai inspirasi kreatif

Sesuaikan Pengaturan

Kustomisasi berapa banyak variasi yang akan dibuat dan intensitasnya:

Steps - Pilih 5, 10, 15, atau 20 variasi warna per baris untuk tingkat granularitas yang berbeda
Increment - Atur lompatan intensitas antar langkah (5%, 10%, atau 20%) untuk mengontrol progresi warna

Salin Warna

Dapatkan warna Anda dengan berbagai cara yang praktis:

Warna Tunggal - Klik swatch mana pun untuk langsung menyalin kode HEX-nya ke clipboard
Semua Warna - Gunakan tombol "Copy All" untuk mengekspor seluruh palet sekaligus

Ekspor Palet Anda

Pilih format yang Anda inginkan dari menu ekspor:

CSS Variables - Custom properties siap pakai untuk CSS modern
SCSS Variables - Deklarasi variabel Sass untuk workflow preprocessor
Tailwind Config - Objek konfigurasi warna untuk proyek Tailwind CSS
JSON - Format data terstruktur yang kompatibel dengan aplikasi atau design tool apa pun

Bagikan Palet Anda: URL secara otomatis diperbarui dengan pengaturan warna Anda. Cukup salin dan bagikan link untuk membiarkan orang lain melihat konfigurasi palet Anda yang persis sama dengan semua pengaturan yang tersimpan.

Fitur

Tiga Jenis Variasi Warna

Tints

Pencerah progresif dengan mencampur putih. Sempurna untuk background, state hover, dan menciptakan kedalaman dalam tema terang.

Shades

Penggelapan progresif dengan mencampur hitam. Ideal untuk teks, border, shadow, dan penekanan dalam desain Anda.

Tones

Desaturasi progresif dengan mencampur abu-abu. Bagus untuk elemen UI yang redup, state disabled, dan skema warna yang sophisticated.

Kontrol Fleksibel

Steps yang Dapat Disesuaikan - Hasilkan 5 hingga 20 variasi per jenis warna untuk kontrol yang presisi
Increment Kustom - Pilih lompatan intensitas 5%, 10%, atau 20% antar warna
Preview Real-time - Lihat perubahan secara instan saat Anda menyesuaikan pengaturan tanpa delay

Berbagai Metode Input

Color Picker Visual

Pilih warna dengan interface yang intuitif dan user-friendly yang membuat pemilihan warna menjadi mudah.

Input Kode HEX

Masukkan nilai warna yang tepat secara langsung untuk pekerjaan yang presisi. Mendukung format HEX lengkap dan singkat.

Generator Random

Temukan kombinasi warna baru dengan satu klik. Sempurna untuk eksplorasi kreatif dan inspirasi.

Opsi Ekspor

CSS Variables

Salin sebagai custom properties untuk CSS modern. Bekerja sempurna dengan vanilla CSS dan solusi CSS-in-JS.

SCSS Variables

Ekspor untuk proyek Sass/SCSS dengan sintaks variabel yang tepat siap digunakan dalam stylesheet Anda.

Tailwind Config

Objek konfigurasi siap paste untuk proyek Tailwind CSS. Terintegrasi mulus dengan tema Anda.

Format JSON

Format data terstruktur yang kompatibel dengan workflow development atau design tool apa pun yang menerima JSON.

Mudah Dibagikan

Parameter URL - Bagikan konfigurasi palet Anda yang persis melalui link dengan semua pengaturan yang tersimpan
Salin Sekali Klik - Salin warna individual atau seluruh palet ke clipboard secara instan

Pertanyaan yang Sering Diajukan

Apa perbedaan antara tints, shades, dan tones?

Tints dibuat dengan menambahkan putih ke warna, membuatnya secara progresif lebih terang sambil mempertahankan hue. Shades dibuat dengan menambahkan hitam, membuat warna secara progresif lebih gelap. Tones dibuat dengan menambahkan abu-abu, yang mengurangi saturasi warna (intensitas) tanpa mengubah kecerahan secara signifikan, menghasilkan variasi yang lebih redup dan sophisticated.

Bagaimana Steps dan Increment bekerja bersama?

Steps menentukan berapa banyak swatch warna yang akan dihasilkan di setiap baris, sementara Increment mengatur perbedaan persentase antara setiap langkah.

Misalnya, dengan 10 steps dan increment 10%, Anda mendapatkan warna pada 10%, 20%, 30%... hingga 100% pencampuran. Jika Anda memilih increment 20% dengan 10 steps, Anda hanya akan melihat 5 swatch (20%, 40%, 60%, 80%, 100%) karena persentase yang lebih tinggi akan melebihi 100%.

Tips pro: Gunakan increment yang lebih kecil (5%) untuk gradien yang halus dan increment yang lebih besar (20%) untuk variasi warna yang tegas dan berbeda.

Bisakah saya menggunakan kode HEX singkat?

Ya, tool ini secara otomatis memperluas kode HEX singkat. Misalnya, memasukkan #F00 akan secara otomatis dikonversi menjadi #FF0000. Anda juga dapat menghilangkan simbol pagar - baik 3B82F6 maupun #3B82F6 bekerja dengan sempurna.

Bagaimana cara membagikan palet warna saya?

Cukup salin URL dari address bar browser Anda. URL berisi semua pengaturan Anda (warna dasar, steps, increment) yang dikodekan sebagai parameter URL dan akan membuat ulang palet yang persis sama saat dibuka oleh siapa pun.

Ini sempurna untuk:

Berbagi dengan anggota tim dan klien
Mem-bookmark palet favorit Anda
Menyertakan dalam dokumentasi desain

Format ekspor mana yang harus saya gunakan?

Pilih berdasarkan kebutuhan proyek Anda:

CSS Variables - Untuk proyek vanilla CSS atau solusi CSS-in-JS seperti styled-components
SCSS Variables - Untuk proyek yang menggunakan preprocessor Sass/SCSS
Tailwind Config - Untuk proyek Tailwind CSS, paste langsung ke tailwind.config.js Anda
JSON - Untuk implementasi kustom, design tool, atau saat Anda memerlukan data terstruktur

Apakah data saya disimpan di mana pun?

Tidak, sama sekali tidak. Semua kalkulasi warna terjadi sepenuhnya di browser Anda menggunakan JavaScript. Tidak ada yang dikirim ke server mana pun, dan kami tidak menyimpan, melacak, atau mengumpulkan pilihan warna Anda dengan cara apa pun.

Privasi Anda dijamin: Tool ini bekerja sepenuhnya offline setelah dimuat. Anda bahkan dapat memutuskan koneksi dari internet dan tetap menggunakannya.