Ubah satu warna menjadi skala tint, shade dan tone yang lengkap lalu ekspor sebagai variabel CSS, di browser Anda.
Sebuah sistem desain jarang membutuhkan satu warna: ia membutuhkan satu keluarga warna. Tint, shade dan tone adalah tiga cara klasik membangun keluarga itu dari satu rona. Tint adalah warna yang dicampur putih, menghasilkan versi yang lebih terang dan lembut untuk latar, permukaan hover dan status nonaktif. Shade adalah warna yang dicampur hitam, menghasilkan versi yang lebih gelap untuk teks di atas latar terang, garis tepi dan status tertekan. Tone adalah warna yang dicampur abu-abu, yang menurunkan saturasi tanpa mengubah kecerahan setajam itu — yang paling jarang dikenal dari ketiganya dan yang menghasilkan tampilan teredam nan editorial yang tak bisa dicapai tint dan shade murni.
Perhitungan di sini sengaja dibuat sederhana dan mudah ditebak: setiap langkah adalah interpolasi linear kanal RGB antara warna dasar Anda dan warna tujuannya (putih #ffffff, hitam #000000 atau abu-abu tengah #808080), dalam kelipatan 10%, sehingga langkah kesepuluh mendarat tepat pada warna tujuan itu. Itulah konvensi yang sama yang dipakai generator tint-and-shade klasik, dan itu membuat setiap nilainya bisa direproduksi — Anda bisa menghitung ulang kotak warna mana pun secara manual. Ada satu konsekuensi yang perlu diketahui: karena interpolasinya terjadi di sRGB dan bukan di ruang perseptual seperti OKLCH, langkah kecerahan yang dirasakan tidak sepenuhnya merata, terutama untuk kuning dan sian yang sangat pekat. Untuk skala antarmuka hal itu biasanya tidak masalah dan malah sering lebih disukai, karena hasilnya tetap dekat dengan rona aslinya.
Ekspor adalah bagian yang membuat ini praktis. Satu klik menyalin paletnya sebagai custom property CSS, siap ditempel ke dalam blok :root, atau sebagai daftar kode heks polos untuk alat desain. Mengaktifkan penamaan ala Tailwind memetakan ulang paletnya ke skala 50–900 yang sudah familiar — 50 sampai 400 makin terang, 500 sebagai warna dasar Anda, 600 sampai 900 makin gelap — yang langsung cocok untuk tema Tailwind atau berkas token mana pun yang mengikuti konvensi yang sama. Anda juga bisa mengunduh paletnya sebagai berkas .css. Setiap perhitungan dan berkas itu sendiri dihasilkan 100% di browser Anda; warna yang Anda pilih tidak pernah dikirim ke server.
Tint adalah warna Anda yang dicampur putih, shade adalah warna Anda yang dicampur hitam, dan tone adalah warna Anda yang dicampur abu-abu. Tint dan shade mengubah kecerahan; tone terutama menurunkan saturasi, menghasilkan warna yang teredam pada kecerahan yang mirip.
Setiap langkah adalah campuran linear langsung dari kanal RGB antara warna dasar Anda dengan putih, hitam atau abu-abu 50%, dalam kelipatan 10% — sehingga tint kesepuluh adalah putih murni dan shade kesepuluh adalah hitam pekat. Nilainya sepenuhnya bisa direproduksi.
Bisa. Aktifkan penamaan ala Tailwind dan ekspornya akan memakai skala 50–900, dengan 500 sebagai warna dasar Anda, siap ditempel ke konfigurasi tema atau berkas variabel CSS Anda.
Tidak otomatis. Skalanya merata secara matematis, bukan secara perseptual, jadi Anda tetap perlu memeriksa pasangan teks dan latar terhadap ambang kontras WCAG — sebagai patokan, pasangkan tint yang paling terang dengan shade yang paling gelap.
Tidak. Paletnya, ekspor CSS-nya dan berkas yang diunduh semuanya dihasilkan secara lokal dengan JavaScript di perangkat Anda — tidak ada yang dikirim atau disimpan di server mana pun.
Vai.la mengubah URL apa pun menjadi tautan pendek dengan statistik klik, QR Code, dan biolink Anda sendiri.
Vai.la tidak bertanggung jawab atas cara alat-alat ini digunakan maupun atas keputusan yang diambil berdasarkan hasilnya.