TL
Tool Lab
💰Donate
💰Donate

Generator Tint & Shade

Hasilkan tint (lebih terang) dan shade (lebih gelap) dari warna dasar apa pun. Buat skala warna lengkap untuk sistem desain.

Warna dasar
Tingkat
Tints (lebih terang — dicampur dengan putih)
#EBF3FE10%
#C4DAFC30%
#9DC1FB50%
#76A8F970%
#4F8FF790%
Dasar
#3B82F6Dasar
Bayangan (lebih gelap — dicampur dengan hitam)
#3575DD90%
#295BAC70%
#1E417B50%
#12274A30%
#060D1910%
Skala penuh (paling terang ke paling gelap)

Tentang alat ini

Generator tint dan shade membuat varian yang lebih terang dan lebih gelap dari warna dasar apa pun. Tint dibuat dengan mencampur warna dasar dengan putih (menambah kecerahan), sedangkan shade dibuat dengan mencampur dengan hitam (mengurangi kecerahan).

Alat ini menghasilkan hingga 5 tingkat tint dan 5 tingkat shade, ditambah warna dasar asli, memberikan palet 11 langkah yang berpusat pada rona yang dipilih. Klik swatch mana pun untuk menyalin kode hex-nya.

Cara penggunaan

  1. Pilih warna dasar menggunakan pemilih warna atau ketik kode hex.
  2. Gunakan tombol sampel untuk mencoba warna preset dengan cepat.
  3. Sesuaikan jumlah tingkat (3-5) untuk mengontrol lebar palet.
  4. Klik swatch mana pun untuk menyalin kode hex. Gunakan Salin semua untuk skala penuh.

Kasus penggunaan

Sistem desain membutuhkan skala warna sistematis untuk setiap warna merek. Desainer UI menghasilkan status hover, aktif, dan nonaktif dari satu warna aksi. Pengembang frontend membuat varian warna yang konsisten.

Pertanyaan umum

  • Apa perbedaan antara tint dan shade?Tint mencampur warna dengan putih (lebih terang); shade mencampur dengan hitam (lebih gelap). Tone mencampur dengan abu-abu dan tidak dihasilkan di sini.
  • Bagaimana tingkat dihitung?Setiap tingkat mencampur warna dasar dengan putih atau hitam pada proporsi 10%, 30%, 50%, 70%, dan 90%, memberikan langkah visual yang konsisten.
  • Bisakah saya mendapatkan variabel CSS dari ini?Outputnya adalah kode hex. Anda dapat menempelkannya ke CSS Anda sebagai --color-500, --color-400, dll.