Apa beda tint, shade, dan tone?

Tint adalah warna yang dicampur dengan putih sehingga lebih terang, shade adalah warna yang dicampur dengan hitam sehingga lebih gelap, dan tone adalah warna yang dicampur dengan abu-abu sehingga saturasinya turun tanpa banyak mengubah kecerahan. Alat ini menghasilkan tint dan shade, karena keduanya yang paling sering dibutuhkan dalam antarmuka.

Kenapa skala warnanya dinomori 50 sampai 900?

Penomoran itu menjadi konvensi umum di sistem desain karena memberi nama yang stabil pada tiap tingkat, sehingga aturan penggunaannya bisa ditulis sekali dan berlaku untuk semua warna. Angka yang lebih kecil berarti lebih terang, dan 500 selalu merupakan warna dasarnya.

Kenapa warna paling terang terlihat pudar?

Karena mencampur warna ke arah putih ikut menurunkan saturasinya, sehingga tingkat paling terang kehilangan sebagian karakter warnanya. Menaikkan sedikit saturasi pada tingkat 50 dan 100 biasanya mengembalikan kesan warnanya tanpa membuatnya terlihat lebih gelap.

Warna

Generator Gradasi Warna

Pilih satu warna untuk mendapat skala terang sampai gelap yang lengkap, beserta gradien CSS-nya.

Warna dasar (tingkat 500)

GRADIEN LINIER

VARIABEL CSS

Apa ini

Generator gradasi warna membangun deretan varian terang dan gelap dari satu warna dasar. Tint dibuat dengan mencampurnya ke arah putih, shade dengan mencampurnya ke arah hitam. Deretan itu disusun sebagai skala bernomor 50 sampai 900 — pola yang lazim dipakai sistem desain — sehingga kamu punya cukup pilihan untuk latar, garis tepi, teks, dan status hover tanpa harus memilih warna baru setiap kali.

Cara kerja

Skala bernomor bekerja karena memberi nama pada setiap tingkat, dan nama itulah yang membuat penerapannya konsisten. Latar halaman memakai tingkat 50, garis tepi memakai 200, teks memakai 700 — dan aturan itu bisa diulang untuk setiap warna dalam sistemmu tanpa keputusan baru.

Perlu diingat bahwa mencampur ke arah putih menurunkan saturasi dan bisa membuat warna terang terasa pudar dan keabu-abuan. Untuk tingkat paling terang, sedikit menaikkan saturasi biasanya menghasilkan warna yang lebih hidup daripada campuran lurus ke putih.

Cara pakai

Pilih warna dasar Warna yang kamu masukkan menjadi tingkat 500 di tengah skala.
Ambil tingkat yang kamu butuhkan Klik tingkat mana pun untuk menyalin kode heksadesimalnya.
Salin gradien CSS-nya Snippet gradien linier dan radial tersedia di bawah skala, siap tempel.

Pertanyaan umum

Apa beda tint, shade, dan tone?: Tint adalah warna yang dicampur dengan putih sehingga lebih terang, shade adalah warna yang dicampur dengan hitam sehingga lebih gelap, dan tone adalah warna yang dicampur dengan abu-abu sehingga saturasinya turun tanpa banyak mengubah kecerahan. Alat ini menghasilkan tint dan shade, karena keduanya yang paling sering dibutuhkan dalam antarmuka.
Kenapa skala warnanya dinomori 50 sampai 900?: Penomoran itu menjadi konvensi umum di sistem desain karena memberi nama yang stabil pada tiap tingkat, sehingga aturan penggunaannya bisa ditulis sekali dan berlaku untuk semua warna. Angka yang lebih kecil berarti lebih terang, dan 500 selalu merupakan warna dasarnya.
Kenapa warna paling terang terlihat pudar?: Karena mencampur warna ke arah putih ikut menurunkan saturasinya, sehingga tingkat paling terang kehilangan sebagian karakter warnanya. Menaikkan sedikit saturasi pada tingkat 50 dan 100 biasanya mengembalikan kesan warnanya tanpa membuatnya terlihat lebih gelap.

Catatan

Perhitungan berjalan di browser-mu. Tidak ada data yang dikirim ke server.