CodeKitHubApakah alat ini?
Siri nuansa ialah satu siri variasi bagi satu warna pada tahap kecerahan yang berbeza, digunakan dalam reka bentuk UI untuk perkara seperti keadaan hover, keadaan dilumpuhkan, sempadan, dan latar belakang yang perlu berkaitan dengan warna jenama tanpa menjadi sama persis dengannya.
Alat ini menukar warna asas anda kepada HSL, mengekalkan rona dan ketepuan tetap, dan melangkah kecerahan daripada kira-kira 95% (kelunturan hampir putih) turun kepada kira-kira 10% (nuansa hampir hitam), dengan warna asal anda diletakkan pada kedudukan semula jadinya di tengah siri.
Kenapa guna alat ini?
- Menjana siri gaya sistem reka bentuk (seperti skala 50/100/200.../900 Tailwind) daripada mana-mana satu warna, bukan hanya daripada palet pratetap tetap.
- Pilih 7, 9 atau 11 langkah bergantung kepada betapa terperincinya anda memerlukan siri tersebut.
- Setiap langkah menunjukkan kod HEX dan peratusan kecerahan yang tepat — klik untuk salin.
- Mengekalkan rona dan ketepuan tetap di seluruh siri, supaya semua nuansa kelihatan jelas berkaitan dengan warna asas dan bukannya beralih ke arah kelabu.
- Percuma, segera, dan sepenuhnya setempat.
Cara menggunakannya
- Pilih warna asas anda menggunakan pemilih warna atau dengan menaip kod HEX.
- Pilih berapa banyak langkah yang anda mahu dalam siri (7, 9 atau 11).
- Baca kod HEX dan peratusan kecerahan setiap nuansa terus pada swatnya.
- Klik mana-mana swat untuk menyalin kod HEXnya.
Contoh
Input
#3B82F6 (biru sederhana), 9 langkahHasil
9 nuansa daripada kelunturan hampir putih (~95% kecerahan) turun kepada nuansa hampir hitam (~10% kecerahan), dengan #3B82F6 sendiri diletakkan sebagai langkah tengahRona dan ketepuan kekal tetap merentasi kesemua 9 langkah — hanya kecerahan berubah — supaya setiap nuansa kelihatan jelas sebagai sebahagian daripada keluarga warna yang sama.
Soalan lazim
Adakah ini sistem yang sama digunakan oleh Tailwind CSS untuk skala warnanya?
Ia adalah idea asas yang sama (rona/ketepuan tetap, kecerahan berubah-ubah) tetapi bukan replika tepat palet khusus Tailwind — skala 50-900 Tailwind ditala secara manual oleh pereka bentuk, bukan dijana oleh satu formula. Alat ini memberi anda struktur yang setanding dijana daripada mana-mana warna yang anda pilih, yang berguna apabila warna asas anda bukan salah satu pratetap Tailwind.
Mengapa warna saya kelihatan hampir sama pada dua langkah bersebelahan?
Ini boleh berlaku berhampiran hujung siri yang sangat cerah atau sangat gelap, di mana kecerahan yang dirasakan berubah lebih perlahan daripada yang disarankan oleh peratusan berangka (ciri terkenal persepsi warna manusia, bukan khusus untuk alat ini). Memilih lebih sedikit langkah (7 berbanding 11) merenggangkan nilai kecerahan lebih jauh dan mengurangkan swat yang hampir berganda.
Bolehkah saya menggunakan nuansa ini terus sebagai sifat tersuai CSS?
Ya — salin setiap kod HEX dan tampalkannya ke dalam pembolehubah CSS anda (cth. --color-brand-100 hingga --color-brand-900), memadankan kedudukan siri dengan mana-mana skala penamaan yang digunakan oleh projek anda.
Patutkah saya guna alat ini atau Color Mixer?
Jika anda membuat versi lebih cerah dan lebih gelap bagi satu warna — keadaan hover, latar belakang halus, sempadan yang berkaitan dengan warna jenama — gunakan penjana nuansa ini. Jika sebaliknya anda memerlukan warna di antara dua warna berbeza (contohnya, satu langkah antara biru utama anda dan jingga sekunder), gunakan Color Mixer, yang menginterpolasi saluran RGB dua warna pada mana-mana nisbah dan bukannya mengubah kecerahan satu warna.
Apa yang berlaku jika warna asas saya sudah sangat cerah atau sangat gelap?
Warna asas sentiasa duduk pada baris tengah, dengan kelunturan melangkah naik ke kira-kira 95% kecerahan di atasnya dan nuansa melangkah turun ke kira-kira 10% di bawahnya. Jika warna asas anda sudah hampir putih, separuh kelunturan siri itu dimampatkan ke dalam julat kecerahan yang sempit (baris hampir berganda) manakala separuh nuansa merebak dengan luas — dan sebaliknya untuk warna asas yang sangat gelap. Untuk siri yang paling sekata jaraknya, mulakan dengan versi kecerahan sederhana bagi warna anda (kira-kira 40-60% kecerahan).
Bolehkah ia menjana ton (warna dicampur dengan kelabu) juga?
Tidak — alat ini hanya mengubah kecerahan sambil mengekalkan ketepuan tetap, yang menghasilkan kelunturan dan nuansa tetapi bukan ton. Jika anda mahukan siri yang lebih lembut, kurangkan ketepuan warna asas anda dahulu (pilih versi lebih kelabu dalam pemilih warna) dan jana siri daripadanya; setiap langkah akan mewarisi ketepuan yang lebih rendah.