Generator Nuansa Warna

Semua alat

Hasilkan rangkaian tints dan shades lengkap dari satu warna — pilih langkah gelap/terang dan jumlah nuansa, lalu salin nilai apa pun secara instan.

Warna dasar
Langkah
%
Seberapa banyak setiap nuansa menjadi lebih terang/gelap per langkah (1–25%).
Jumlah nuansa
Berapa banyak tints dan shades yang dihasilkan di setiap sisi warna dasar.
Gradien
Nuansa yang dihasilkan

Pilih warna dasar, persentase langkah, dan jumlah — setiap tint dan shade dihitung secara instan di browser Anda.

Tentang Generator Nuansa Warna

Color Shades Generator memperluas satu warna menjadi rangkaian lengkap tint dan shade. Berikan warna dasar dan alat ini menghasilkan tint yang semakin terang di satu sisi dan shade yang semakin gelap di sisi lain — rangkaian klasik gaya 50-hingga-900 yang digunakan pada sistem desain modern.

Dua kontrol membentuk hasilnya: persentase langkah menentukan seberapa terang atau gelap setiap shade (1–25% per langkah), dan jumlah menentukan berapa banyak tint dan shade muncul di tiap sisi warna dasar, hingga sepuluh. Strip gradien menampilkan pratinjau seluruh rangkaian sekilas.

Pembuatan terjadi secara instan di browser Anda saat Anda mengetik — tidak ada yang dikirim ke server. Salin nilai tunggal mana pun, daftar lengkap, atau seluruh rangkaian sebagai variabel CSS, siap dimasukkan ke file design-token atau skala warna gaya Tailwind.

Cara menggunakan Generator Nuansa Warna

  1. Pilih warna dasar dengan pemilih warna atau ketik nilainya; klik "Random color" untuk inspirasi.
  2. Atur persentase langkah untuk mengontrol seberapa kuat setiap shade menerangi atau menggelapkan.
  3. Pilih jumlah shade untuk menentukan berapa banyak tint dan shade muncul di tiap sisi.
  4. Klik sebuah swatch untuk menyalinnya, atau gunakan "Copy all" dan "Copy CSS variables" untuk seluruh rangkaian.

Pertanyaan yang sering diajukan

Ya, sepenuhnya. Semua tint dan shade dihitung secara langsung di browser Anda, sehingga tidak ada biaya, tidak perlu akun dan tidak ada batasan berapa banyak rangkaian yang Anda hasilkan.

Tint adalah warna dasar Anda yang dicampur ke arah putih (lebih terang), sementara shade adalah warna dasar yang dicampur ke arah hitam (lebih gelap). Generator ini menghasilkan kedua arah sekaligus, diberi label "Tints (lighter)" dan "Shades (darker)" di sekitar warna dasar Anda.

Atur jumlah menjadi 4 atau 5 per sisi sehingga Anda mendapatkan sembilan hingga sebelas swatch total, dengan warna dasar Anda di tengah. Langkah sekitar 8–10% biasanya memberi jarak yang mirip dengan skala 50–900 yang digunakan framework populer.

Langkah kecil (3–6%) memberi variasi hover dan border yang halus; langkah menengah (8–12%) cocok untuk rangkaian sistem desain penuh; langkah besar (15–25%) menghasilkan set kontras tinggi bergaya poster. Perhatikan pratinjau gradien — rangkaian yang baik seharusnya menggelap secara merata tanpa banding.

Bisa. "Copy CSS variables" menghasilkan seluruh rangkaian sebagai properti kustom CSS bernama, dan "Copy all" memberi Anda daftar nilai polos yang bisa ditempel di mana saja, dari peta SCSS hingga objek tema JavaScript.
Bagikan ini
Alat Terkait
Generator Palet Warna Buat palet warna yang harmonis dari roda warna interaktif — terapkan aturan harmoni seperti analogous, complementary, atau triad, lalu salin nilai apa pun secara instan. Gratis
Pencampur Warna Campur warna awal menjadi warna akhir hingga 10 langkah — pratinjau gradien, ambil setiap nuansa, dan salin format apa pun secara instan. Gratis
Pengekspor Palet Tempel atau impor sekumpulan warna dan ekspor secara instan ke variabel CSS, SCSS, konfigurasi Tailwind, JSON, atau swatch SVG — langkah terakhir untuk palet apa pun. Gratis
Ekstraktor Warna Gambar Ambil palet warna yang disempurnakan dan siap disalin dari gambar apa pun. Gratis
Palet Warna Web-Safe Jelajahi 216 warna web-safe klasik sebagai kisi swatch yang dapat diklik — urutkan berdasarkan hue atau urutan kubus, saring berdasarkan hex, dan salin nilai HEX atau rgb() apa pun secara instan. Gratis
Pemasangan Font & Direktori Google Fonts Jelajahi direktori pilihan Google Fonts populer dengan pratinjau langsung, saring berdasarkan kategori dan cari berdasarkan nama, lalu salin CSS siap pakai dan jelajahi saran pasangan font — semuanya di browser Anda. Gratis
Pencarian populer
generator gradasi warna tint dan shade terangkan dan gelapkan warna gradasi sebuah warna generator tint warna buat gradasi warna
Butuh bantuan?
Menemukan masalah dengan alat ini? Beri tahu tim kami.
Laporkan masalah

Tambahkan alat gratis ini ke situs web Anda sendiri — salin dan tempel kode di bawah ini.