Generator Bayangan Warna
Bayangan (shade) merupakan hasil pencampuran suatu warna dengan hitam, di mana setiap tahapnya semakin gelap. Generator ini menggunakan warna dasar HEX untuk menghasilkan 3 hingga 20 tahapan (10 secara bawaan) yang semakin gelap, serta tinta (tint) yang lebih terang dari warna dasar yang sama. Alat ini sangat berguna untuk skala palet dalam sistem desain (dari 500 hingga 900), status tombol saat ditekan atau aktif, warna teks yang tetap mudah dibaca, serta lapisan bayangan. Setiap tahap ditampilkan sebagai swatch dengan nilai hex-nya yang siap disalin.
Bagaimana proses pembentukan bayangan berlangsung
-
1
Pilih warna dasar
Gunakan pemilih warna, atau lewatkan nilai hex melalui URL halaman dalam mode bertahap. Warna dasar berada di antara rentang tinta dan rentang bayangan.
-
2
Pilih jumlah langkah
3 hingga 20 langkah, 10 secara bawaan. Lebih banyak langkah menghasilkan tangga yang lebih halus; lebih sedikit langkah menghasilkan lompatan yang lebih kuat.
-
3
Campur dengan hitam dalam langkah yang merata
Setiap langkah mengalikan saluran merah, hijau, dan biru dengan faktor yang sama, yang setara dengan mencampur dengan hitam (atau putih untuk tinta) dalam langkah merata. Dengan 10 langkah, tiap langkah sekitar 9 % lebih gelap atau lebih terang. Hue tetap identik dengan warna dasar.
-
4
Baca skala
Setiap swatch menampilkan nilai hex-nya. Pilih teksnya untuk menyalinnya ke CSS, tema Tailwind, atau file design tokens.
Bayangan, tinta, dan tona
- Bayangan (shade): warna + hitam → lebih gelap.
- Tinta (tint): warna + putih → lebih terang.
- Tona (tone): warna + abu-abu → saturasi lebih rendah.
Generator ini menghasilkan bayangan dan tinta sekaligus dari warna dasar yang sama. Pasangan tinta dan bayangan biasanya membentuk palet sistem desain (misalnya dari brand-100 hingga brand-900, dengan 500 sebagai dasar).
Skala contoh: #3B82F6 (Tailwind blue-500)
| Langkah | HEX | Campuran | Peran dalam sistem desain |
|---|---|---|---|
| 0 | #3B82F6 | Dasar | Merek utama (misalnya blue-500) |
| 1 | #316CCD | 17% hitam | Status diarahkan kursor |
| 2 | #2756A4 | 33% hitam | Status ditekan/aktif (blue-600) |
| 3 | #1D417B | 50% hitam | blue-700 |
| 4 | #132B52 | 67% hitam | blue-800 |
| 5 | #091528 | 83% hitam | blue-900 |
Tabel ini menunjukkan skala 5 langkah: setiap langkah adalah seperenam jarak menuju hitam.
Cara setiap langkah dihitung
Alat ini mengalikan saluran merah, hijau, dan biru dari warna dasar dengan faktor yang sama pada setiap langkah. Itu setara dengan mencampur dengan hitam untuk rentang bayangan dan dengan putih untuk rentang tinta, dalam langkah yang merata. Dengan 10 langkah, tiap langkah sekitar 9 % lebih gelap atau lebih terang dari langkah sebelumnya.
Karena semua saluran dikalikan secara sama, hue warna dasar tetap persis: dasar biru tetap biru, dasar hijau tetap hijau. Mencampur dengan hitam juga menurunkan saturasi bersamaan dengan kecerahan, sehingga langkah gelap terlihat alami, bukan menyala. Mengurangi kecerahan saja, tanpa menyentuh saturasi, membuat warna gelap menjadi terlalu jenuh.
Menggunakan nuansa pada antarmuka pengguna
- Tombol: warna dasar untuk keadaan istirahat; 1–2 tingkat lebih gelap saat diklik atau diarahkan kursor; 2–3 tingkat lebih gelap saat aktif atau ditekan.
- Teks utama: warnanya 2–3 tingkat lebih gelap daripada warna dasar agar tetap mudah dibaca di latar putih; warna lebih terang untuk teks sekunder.
- Border / divider: 1–2 tingkat lebih gelap daripada latar belakang, cukup untuk membedakan bentuk tanpa terasa berlebihan.
- Bayangan: langkah tergelap (atau lebih gelap) dengan nilai alpha yang dikurangi, bukan warna abu-abu baru.
- Visualisasi data: gunakan nuansa dari satu warna untuk skala berurutan (besaran nilai), atau pasangkan nuansa dari dua warna untuk skala yang saling berlawanan (positif dan negatif).
Kesalahan Umum
- Terlalu banyak langkah dikompres ke dalam rentang yang tidak dapat dibedakan. Skala berlangkah-10 bekerja dengan baik karena setiap tingkatnya sekitar 9 % lebih gelap; pada 20 langkah perbedaannya menjadi samar. Untuk kontras yang kuat, gunakan 3–5 langkah.
- Pergeseran hue tidak mungkin terjadi di sini: setiap langkah mengalikan semua saluran secara sama, merah tetap merah dan hijau tetap hijau. Pergeseran hue muncul saat interpolasi antara dua warna berbeda, yang tidak dilakukan alat ini.
- Mengabaikan aspek aksesibilitas: warna-warna yang tampak serasi dapat gagal memenuhi standar kontras WCAG terhadap latar belakang. Pastikan kontras selalu dipenuhi pada setiap tahap pengembangan.
- Skala yang hanya berisi bayangan terasa menekan pada latar belakang gelap. Padukan dengan skala tinta untuk mendapatkan mode gelap yang nyaman.
Pertanyaan yang Sering Diajukan
Untuk sistem desain, konvensi umumnya menggunakan 5 langkah bayangan ditambah 5 langkah tinta (total 10 tingkat di sekitar warna dasar). Untuk warna yang menunjukkan status antarmuka pengguna secara cepat (seperti saat diklik atau dalam keadaan aktif), 3 tingkat cukup.
Pencampuran merata yang dipakai di sini menjaga setiap langkah tetap pada garis lurus antara warna dasar dan hitam, sehingga langkah tengah tetap bersih. Bagian tengah yang keruh biasanya berasal dari alat yang menginterpolasi antara dua warna berbeda, atau yang mengurangi kecerahan tanpa mengurangi saturasi.
Warna gelap pada dasarnya hampir tidak memiliki ruang untuk semakin gelap sebelum berubah menjadi hitam; latar warna ungu tua hanya memungkinkan tiga tingkat perbedaan yang jelas sebelum skala warnanya runtuh. Pilih latar dengan kecerahan sedang agar skala warnanya lebih kaya.
Memiliki tujuan yang serupa, namun pencampuran dengan warna hitam mengurangi saturasi sekaligus kecerahan, sehingga hasilnya umumnya terlihat lebih alami. Pengurangan kecerahan murni justru membuat saturasi tetap tinggi dan dapat menyebabkan warna-warna gelap menjadi terlalu jenuh.
Alat Terkait
Referensi Tabel ASCII
Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.
Referensi Karakter HTML
Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.
Penghitung FPS
Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.
Generator Warna Acak
Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.
Pemformat JSON
Tempel JSON untuk dirapikan dengan indentasi 2 atau 4 spasi, dipadatkan menjadi output ringkas, atau diperiksa sintaksnya sebelum hasilnya disalin.
Pemilih Warna HEX
Pilih atau masukkan warna HEX untuk mendapatkan RGB, HSL, perkiraan CMYK, luminans relatif, serta kontras terhadap putih dan hitam.