Pembuat Tint & Shade Warna
Buat garis tint (dicampur ke arah putih) dan shade (dicampur ke arah hitam) dari warna dasar, dengan nilai hex yang tepat untuk sistem desain dan status UI.
Input
Pilih warna, atau ketik nilai HEX langsung.
Berapa banyak baris tint/shade yang akan dibuat, menyebar merata antara warna dasar dan putih/hitam murni.
Output
Your color palette will appear here.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/color-tint-shade-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseColor": "#808080",
"steps": "5"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `color-tint-shade-generator` tool (Color Tint & Shade Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/color-tint-shade-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Tint & Shade Warna — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Color Tint & Shade Generator mengambil satu warna dasar dan membangun garis tint yang lebih terang (dicampur ke arah putih) dan shade yang lebih gelap (dicampur ke arah hitam), masing-masing diberi label dengan persentase campuran dan kode hex yang tepat. Pilih warna, tentukan berapa banyak langkah yang diinginkan, dan dapatkan ramp siap pakai untuk sistem desain, perpustakaan komponen, atau UI sekali jalan.
Tint vs. shade
- Tint — warna dasar dicampur dengan putih. Tint digunakan untuk latar belakang hover, status dinonaktifkan, sorotan halus, dan permukaan mode terang yang masih terlihat sebagai hue "sama" dengan warna merek Anda.
- Shade — warna dasar dicampur dengan hitam. Shade digunakan untuk status ditekan/aktif, permukaan mode gelap, batas, dan teks yang perlu tetap dapat dibaca pada latar belakang terang sambil tetap berhubungan dengan warna dasar.
Bersama-sama, ramp tint/shade adalah tulang punggung sebagian besar skala warna token desain (color-50 hingga color-900, atau serupa): satu hue dasar diperluas menjadi rangkaian nilai kejelasan lengkap yang dapat ditarik UI secara konsisten, alih-alih setiap komponen memilih bayangan ad hoc-nya sendiri.
Bagaimana pembuatannya bekerja
Setiap langkah mencampurkan saluran merah, hijau, dan biru warna dasar ke target (putih atau hitam) dengan persentase t, menggunakan interpolasi linier lurus per saluran:
- Tint:
channel + (255 - channel) × t - Shade:
channel × (1 - t)
Hasilnya dibulatkan ke bilangan bulat terdekat dan dikonversi kembali ke hex. Persentase menyebar merata antara 0% dan 100% — misalnya, dengan 5 langkah Anda mendapatkan kira-kira 17%, 33%, 50%, 67%, dan 83% — jadi ramp tidak pernah menyertakan langkah merosot 0% (identik dengan warna dasar) atau langkah 100% (putih atau hitam murni).
Cara menggunakannya
- Pilih warna dasar dengan swatch warna, atau ketik nilai hex langsung.
- Sesuaikan slider Langkah (3–9) untuk mengontrol berapa banyak baris tint/shade yang dihasilkan.
- Tabel diperbarui secara instan dengan persentase, hex tint, dan hex shade setiap baris.
- Salin tabel atau unduh sebagai CSV untuk ditempel ke stylesheet, konfigurasi Tailwind, atau palet warna alat desain.
FAQ
Mengapa interpolasi RGB linier bukan penyesuaian kecerahan HSL? Pencampuran saluran langsung ke arah putih atau hitam adalah pembacaan paling harfiah dari "tint" dan "shade" dari teori warna tradisional — itulah yang terjadi ketika Anda secara fisik mencampur cat dengan pigmen putih atau hitam. Menyesuaikan hanya kecerahan HSL dapat mengubah tampilan saturasi warna di tengah ramp; pencampuran saluran langsung membuat blend dapat diprediksi.
Mengapa langkah tidak mendarat pada persentase bulat seperti 10%, 20%, 30%? Langkah-langkah menyebar merata di seluruh interval antara warna dasar dan putih/hitam murni, sehingga persentase pasti bergeser dengan jumlah langkah. Langkah tengah dari jumlah langkah ganjil selalu mendarat pada bersih 50%.
Bisakah saya menggunakan warna-warna ini langsung di CSS?
Ya — setiap kode hex siap untuk ditempel ke properti kustom CSS, variabel Sass, atau skala warna Tailwind, mis. --color-primary-100: #E9E9E9;.
Akankah meningkatkan jumlah langkah mengubah nilai hex yang ada? Ya. Karena persentase menyebar merata di semua langkah, mengubah jumlah langkah memindahkan posisi setiap langkah — ini bukan hanya menambahkan baris ke ramp yang ada.
Privasi
Semua matematika warna terjadi secara lokal di browser Anda — warna dasar dan jumlah langkah yang dipilih tidak pernah dikirim ke server.