Tint dan Shade
Generator Tint dan Shade membuat tint yang lebih terang (dicampur putih) dan shade yang lebih gelap (dicampur hitam) dari warna dasar apa pun dalam 5, 10, atau 20 langkah, lengkap dengan output variabel CSS.
Tentang alat ini
Generator Tint dan Shade membuat tint yang lebih terang (dicampur putih) dan shade yang lebih gelap (dicampur hitam) dari warna dasar apa pun dalam 5, 10, atau 20 langkah, lengkap dengan output variabel CSS.
Cara menggunakan
- Pilih warna dasar.
- Tentukan 5, 10, atau 20 langkah.
- Klik swatch mana pun untuk menyalin kode hex-nya.
- Klik Copy as CSS Variables untuk mengekspor seluruh skala.
Perlu diketahui
- Tint adalah warna yang dicampur putih; shade adalah warna yang dicampur hitam.
- Generator ini mencampur warna dalam langkah RGB yang sama besar, sehingga setiap langkah mengubah warna dengan jumlah yang sama.
- Design system seperti Tailwind memakai skala 50–900 yang disusun dari tint dan shade setiap warna brand.
- Periksa kontras warna teks yang diambil dari skala, karena langkah-langkah tengah sering tidak lolos WCAG AA di atas latar putih.
Berjalan sepenuhnya di browser Anda — apa pun yang Anda masukkan tidak diunggah atau disimpan.
Pertanyaan umum
Apa perbedaan tint dan shade?
Tint mencerahkan warna dengan menambahkan putih; shade menggelapkannya dengan menambahkan hitam. Sementara tone menambahkan abu-abu.
Berapa banyak shade yang sebaiknya dimiliki satu warna dalam design system?
Sekitar 10 langkah sudah umum, misalnya 50, 100 … 900 di Tailwind. Jumlah ini memberi rentang yang cukup untuk latar belakang, border, teks, dan state hover.
Bagaimana cara memakai skala ini di CSS?
Salin skala sebagai custom properties, lalu panggil dengan var(--color-name), misalnya untuk latar belakang, border, atau state hover.
Mengapa beberapa tint terlihat pudar?
Mencampur dengan putih menurunkan saturasi sekaligus menaikkan kecerahan. Untuk varian terang yang lebih hidup, atur saturasi secara terpisah di HSL.