Generator Tint & Shade
21 warna
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Detail teknis
Cara Kerja Generator Tint & Shade
Apa yang Dilakukan Alat Ini
Generator Tint & Shade membuat tint yang lebih terang (dicampur dengan putih) dan shade yang lebih gelap (dicampur dengan hitam) dari warna dasar apa pun. Masukkan warna dan pilih jumlah langkah untuk menghasilkan gradasi variasi yang halus. Setiap langkah menampilkan nilai HEX, RGB, serta persentase pencampuran, sehingga mudah untuk membangun skala warna yang konsisten untuk desain UI, branding, dan visualisasi data.
Kasus Penggunaan Umum untuk Developer
Developer menggunakan generator tint dan shade saat membangun skala design token (misalnya, blue-100 hingga blue-900), membuat state hover dan active untuk elemen interaktif, merancang hierarki warna yang aksesibel, serta menghasilkan warna latar belakang dan permukaan yang konsisten untuk tema terang dan gelap. Alat ini penting untuk membangun palet warna kustom Tailwind CSS atau sistem warna Material Design.
Cara Kerja Tint dan Shade
Tint dibuat dengan mencampur warna dengan putih, sehingga meningkatkan kecerahannya. Shade dibuat dengan mencampur dengan hitam, sehingga menurunkan kecerahan. Rumus untuk tint adalah: new = base + (255 - base) × factor. Untuk shade: new = base × (1 - factor). Langkah-langkah didistribusikan secara merata antara warna dasar dan putih murni (tint) atau hitam murni (shade), menghasilkan gradasi linear dari nilai warna.
Kesalahan Umum dan Kasus Tepi
Pencampuran linear dengan putih atau hitam dapat menghasilkan tint yang pucat atau shade yang keruh untuk beberapa hue. Kuning dapat terlihat kehijauan saat digelapkan, dan biru dapat kehilangan kecerahannya saat diterangkan. Untuk skala yang seragam secara perseptual, pertimbangkan menggunakan ruang warna OKLCH atau CIELAB. Selalu verifikasi bahwa tint paling terang dan shade paling gelap Anda mempertahankan kontras yang cukup terhadap latar belakang yang dituju.
Kapan Menggunakan Alat Ini vs Kode
Gunakan alat browser ini untuk eksplorasi cepat dan menghasilkan skala warna selama pekerjaan desain. Untuk sistem desain produksi, hasilkan tint dan shade secara terprogram menggunakan library warna seperti chroma.js atau culori yang mendukung ruang warna yang seragam secara perseptual dan dapat mengeluarkan design token dalam format apa pun.